用canvas画布绘制立方体

马黑黑 发表于 2024-5-1 10:48

本帖最后由马黑黑于 2024-5-1 11:38 编辑 <br /><br /><canvas id="canv" width="400" height="400" style="border:1px solid gray"></canvas>

<script>

var ctx = canv.getContext('2d');
var x = 50, y = 150, width = 200;

var points = [
{x: x + width, y: y},             // 1
{x: x, y: y},                   // 2
{x: x, y: y + width},             // 3
{x: x + width, y: y + width},    // 4
{x: x + width*3/2, y: y + width/2}, // 5
{x: x + width*3/2, y: y - width/2}, // 6
{x: x + width/2, y: y - width/2}, // 7
{x: x + width/2, y: y + width/2} // 8
];

let drawPanel = (p1,p2,p3,p4) => {
ctx.beginPath();
ctx.strokeStyle = 'white';
ctx.fillStyle = 'rgba(0,100,100,.7)';
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.lineTo(p4.x, p4.y);
ctx.closePath();
ctx.stroke();
ctx.fill();
};

drawPanel(points,points, points, points); //后
drawPanel(points,points, points, points); //底
drawPanel(points,points, points, points); //左
drawPanel(points,points, points, points); //顶
drawPanel(points,points, points, points); //右
drawPanel(points,points, points, points); //前

</script>

马黑黑 发表于 2024-5-1 10:48

本帖最后由马黑黑于 2024-5-1 11:38 编辑

代码：
<canvas id="canv" width="400" height="400" style="border:1px solid gray"></canvas>

<script>

var ctx = canv.getContext('2d');
var x = 50, y = 150, width = 200;

var points = [
   {x: x + width, y: y},             // 1
   {x: x, y: y},                   // 2
   {x: x, y: y + width},             // 3
   {x: x + width, y: y + width},    // 4
   {x: x + width*3/2, y: y + width/2}, // 5
   {x: x + width*3/2, y: y - width/2}, // 6
   {x: x + width/2, y: y - width/2}, // 7
   {x: x + width/2, y: y + width/2} // 8
];

let drawPanel = (p1,p2,p3,p4) => {
   ctx.beginPath();
   ctx.strokeStyle = 'white';
   ctx.fillStyle = 'rgba(0,100,100,.7)';
   ctx.moveTo(p1.x, p1.y);
   ctx.lineTo(p2.x, p2.y);
   ctx.lineTo(p3.x, p3.y);
   ctx.lineTo(p4.x, p4.y);
   ctx.closePath();
   ctx.stroke();
   ctx.fill();
};

drawPanel(points,points, points, points); //后
drawPanel(points,points, points, points); //底
drawPanel(points,points, points, points); //左
drawPanel(points,points, points, points); //顶
drawPanel(points,points, points, points); //右
drawPanel(points,points, points, points); //前

</script>

马黑黑 发表于 2024-5-1 10:54

此法在用canvas画布绘制立方体框架（方法二） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com) 基础上进行改进，用老老实实绘制矩形的方式画出每一个立方体的面，以便可以使用 fill() 方法着色。

绘制面的顺序颇有讲究，被遮挡的面先画，最后画不被遮挡的面。面的填充色应具备透明属性，不然被遮挡的面看不到。每个面都应描边，除非给每一个面设置不同的填充颜色，二者均可以保证立方体看上去像是立方体。

马黑黑 发表于 2024-5-1 10:59

本帖最后由马黑黑于 2024-5-1 11:34 编辑

代码第 27 行关闭路径很重要：我们画的面没有做自闭合，如果没有这行，stroke() 描边最后一根线不会描上，closePath() 之后则告诉画布，我这个是闭合的，你给我描边的原点去。

红影发表于 2024-5-1 12:04

这个好，更容易理解{:4_187:}

红影发表于 2024-5-1 12:13

马黑黑发表于 2024-5-1 10:59
代码第 27 行关闭路径很重要：我们画的面没有做自闭合，如果没有这行，stroke() 描边最后一根线不会描上， ...

是的，否则给四个点只能画三条边呢。

红影发表于 2024-5-1 12:13

这个很有立体感，漂亮的立方体{:4_204:}

马黑黑 发表于 2024-5-1 12:38

红影发表于 2024-5-1 12:04
这个好，更容易理解

老老实实画面{:4_170:}

马黑黑 发表于 2024-5-1 12:39

红影发表于 2024-5-1 12:13
这个很有立体感，漂亮的立方体

效果和幼儿园小盆友画的差不多

马黑黑 发表于 2024-5-1 12:39

红影发表于 2024-5-1 12:13
是的，否则给四个点只能画三条边呢。

{:4_190:}

红影发表于 2024-5-1 13:27

马黑黑发表于 2024-5-1 12:38
老老实实画面

发现这样老老实实画的好，虽然麻烦点，当然，这个和第一个不一样，比那个还简洁点。但是都好理解。
反正我们玩的都是简单的，老老实实的最好了。

红影发表于 2024-5-1 13:28

马黑黑发表于 2024-5-1 12:39
效果和幼儿园小盆友画的差不多

小朋友只会用笔画，无法用代码来画呢{:4_173:}

红影发表于 2024-5-1 13:29

马黑黑发表于 2024-5-1 12:39

这个只是有视觉的立体感吧，转动起来不知道会不会显示立体。

马黑黑 发表于 2024-5-1 16:56

红影发表于 2024-5-1 13:29
这个只是有视觉的立体感吧，转动起来不知道会不会显示立体。

会有的。这个画法，最简单的旋转就是画布坐标系旋转，对立方体而言是绕Z轴转动。

若想令立方体绕X轴、Y轴旋转，画布坐标系的旋转方式不行，实现方式应该很复杂：每次重绘，重新计算八个顶点的位置，需要用到三角函数。

马黑黑 发表于 2024-5-1 16:57

红影发表于 2024-5-1 13:28
小朋友只会用笔画，无法用代码来画呢

道理是一样的

马黑黑 发表于 2024-5-1 16:57

红影发表于 2024-5-1 13:27
发现这样老老实实画的好，虽然麻烦点，当然，这个和第一个不一样，比那个还简洁点。但是都好理解。
反正 ...

{:4_181:}

南无月 发表于 2024-5-1 20:47

马黑黑发表于 2024-5-1 10:54
此法在用canvas画布绘制立方体框架（方法二） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huacha ...

{:4_199:}
看完了三个贴，头发掉了好多根。。
一个字：老师最伟大。。

马黑黑 发表于 2024-5-1 20:57

南无月发表于 2024-5-1 20:47
看完了三个贴，头发掉了好多根。。
一个字：老师最伟大。。

乱说话了。这些都是简化的，复杂的绘制方法需要三角函数

南无月 发表于 2024-5-1 21:09

马黑黑发表于 2024-5-1 20:57
乱说话了。这些都是简化的，复杂的绘制方法需要三角函数

{:4_170:}
三角函数我不会，我文盲。

马黑黑 发表于 2024-5-1 21:36

南无月发表于 2024-5-1 21:09
三角函数我不会，我文盲。

这个，是文盲才会

页: [1] 2 3 4

花潮论坛's Archiver

用canvas画布绘制立方体