马黑PHP整站系统

用canvas画布绘制立方体

位置: 首页 > 代码集锦[ 发布时间: 2024.5.1  作者: 马黑  阅读: 121 ]

代码

<canvas id="canv" width="400" height="400"></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[4],points[5], points[6], points[7]); //后 drawPanel(points[2],points[3], points[4], points[7]); //底 drawPanel(points[1],points[2], points[7], points[6]); //左 drawPanel(points[0],points[1], points[6], points[5]); //顶 drawPanel(points[0],points[3], points[4], points[5]); //右 drawPanel(points[0],points[1], points[2], points[3]); //前 </script>

前一篇: 俺家小公举（canvas画布灰度化图像）
下一篇: 在canvas画布中绘制立体正五角星

发表评论:

       

评论列表 [3条]

#3 | 悄然 于 2024-5-1 21:13 发布: 原来这个最好理解。。八个点定好位，一面一面画。。

#2 | 小希 于 2024-5-1 12:37 发布: 这个立方体系列教程，需得重第一课看起

#1 | 飞飞 于 2024-5-1 12:36 发布: 这个六面带色了。。这么复杂的画法，代码看着却很简洁

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com