用canvas画布绘制立方体

马黑黑

马黑黑

代码：

1. <canvas id="canv" width="400" height="400" style="border:1px solid gray"></canvas>
   
2. 
   
3. <script>
   
4. 
   
5. var ctx = canv.getContext('2d');
   
6. var x = 50, y = 150, width = 200;
   
7. 
   
8. var points = [
   
9.         {x: x + width, y: y},               // 1
   
10.         {x: x, y: y},                       // 2
    
11.         {x: x, y: y + width},               // 3
    
12.         {x: x + width, y: y + width},       // 4
    
13.         {x: x + width*3/2, y: y + width/2}, // 5
    
14.         {x: x + width*3/2, y: y - width/2}, // 6
    
15.         {x: x + width/2, y: y - width/2},   // 7
    
16.         {x: x + width/2, y: y + width/2}    // 8
    
17. ];
    
18. 
    
19. let drawPanel = (p1,p2,p3,p4) => {
    
20.         ctx.beginPath();
    
21.         ctx.strokeStyle = 'white';
    
22.         ctx.fillStyle = 'rgba(0,100,100,.7)';
    
23.         ctx.moveTo(p1.x, p1.y);
    
24.         ctx.lineTo(p2.x, p2.y);
    
25.         ctx.lineTo(p3.x, p3.y);
    
26.         ctx.lineTo(p4.x, p4.y);
    
27.         ctx.closePath();
    
28.         ctx.stroke();
    
29.         ctx.fill();
    
30. };
    
31. 
    
32. drawPanel(points[4],points[5], points[6], points[7]); //后
    
33. drawPanel(points[2],points[3], points[4], points[7]); //底
    
34. drawPanel(points[1],points[2], points[7], points[6]); //左
    
35. drawPanel(points[0],points[1], points[6], points[5]); //顶
    
36. drawPanel(points[0],points[3], points[4], points[5]); //右
    
37. drawPanel(points[0],points[1], points[2], points[3]); //前
    
38. 
    
39. </script>

复制代码

马黑黑

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

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

马黑黑

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

红影

这个好，更容易理解

红影

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

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

红影

这个很有立体感，漂亮的立方体

马黑黑

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

老老实实画面

马黑黑

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

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

马黑黑

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

红影

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

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

红影

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

小朋友只会用笔画，无法用代码来画呢

红影

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

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

马黑黑

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

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

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

马黑黑

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

道理是一样的

马黑黑

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

南无月

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

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

马黑黑

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

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

南无月

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

三角函数我不会，我文盲。

马黑黑

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

这个，是文盲才会