用canvas画布绘制立方体框架

马黑黑 · 发表于 2024-4-30 11:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-4-30 11:46 编辑

马黑黑 · 发表于 2024-4-30 11:39

本帖最后由马黑黑于 2024-4-30 11:47 编辑

代码

<style>

#canv { display: block; position: relative; margin: 20px auto; border: 1px solid gray; }

</style>

var ctx = canv.getContext('2d');

class Box {

constructor(x,y,width,color) {

this.x = x;

this.y = y;

this.width = width;

this.color = color;

};

drawPanel(context) {

//正面

context.beginPath();

context.moveTo(this.x, this.y);

context.lineTo(this.x + this.width, this.y);

context.lineTo(this.x + this.width, this.y + this.width);

context.lineTo(this.x, this.y + this.width);

context.lineTo(this.x, this.y);

//顶面

context.lineTo(this.x + this.width/2, this.y - this.width/2);

context.lineTo(this.x + this.width*3/2, this.y - this.width/2);

context.lineTo(this.x + this.width, this.y);

//右侧

context.moveTo(this.x + this.width, this.y + this.width);

context.lineTo(this.x + this.width*3/2, this.y + this.width/2);

context.lineTo(this.x + this.width*3/2, this.y - this.width/2);

context.stroke();

//后面

context.setLineDash([3]);

context.moveTo(this.x + this.width/2, this.y - this.width/2);

context.lineTo(this.x + this.width/2, this.y + this.width/2);

context.lineTo(this.x + this.width*3/2, this.y + this.width/2);

//底面和左侧

context.moveTo(this.x + this.width/2, this.y + this.width/2);

context.lineTo(this.x, this.y + this.width);

context.stroke();

};

var box = new Box(50.5, 150.5, 200);

box.drawPanel(ctx);

</script>

马黑黑 · 发表于 2024-4-30 11:46

这应该是较笨的画法吧，不过又不是画不出来。它实际上和我们在纸上画的一样的，区别仅在于，纸上画我们用笔，canvas上画用JS代码组织指令。

绘制指令就两种：moveTo(x,y) 和 lineTo(x,y)，就是画笔移动到哪里、画条直线到哪里。画时，能连笔的尽量连笔，不能的就移笔后再画线，尽量在重叠直线上不重复绘制（但如果着色，还是得老老实实一面一面地画）。

马黑黑 · 发表于 2024-4-30 11:56

第 46 行代码：

var box = new Box(50.5, 150.5, 200);

创建一个 Box 实例，参数为 x, y, width, color，其中，x, y 是立方体框架起笔坐标，width 是立方体任意面的宽高尺寸，color参数这里没用上（默认使用黑色）。

立方体的正面从 (50.5, 150.5) 起笔，使用0.5是为了让 stroke 出来的线条是平滑的细线条，这是画布画线的一个小技巧。立方体面的宽高为 200。这样，我们画出来的立方体就处在画布的正中央。

第 47 行代码：

box.drawPanel(ctx);

这是调用了 Box 类（class）的方法 drawPanel(画笔) ，有实例化的 box 去完成。

马黑黑 · 发表于 2024-4-30 12:05

这里面，存在立方体八个顶点坐标的算法。本例采用了简化的方式，避免了复杂的三角函数运算：

先以左后的上顶点为例，x 坐标是起笔x坐标 + width/2，y 坐标是起笔y坐标 - width/2；再以右后的顶点为例，x 坐标是起笔x坐标 + width*3/2，y 坐标是起笔y坐标 - width/2；其它各个顶点依据类似规律计算。