用canvas画布绘制立方体

评论资讯 [ 总 494 则 ]

·飞飞 - 2025-4-22 21:44
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
·飞飞 - 2025-4-1 19:52
·飞飞 - 2025-3-31 21:06
·小希 - 2025-3-30 22:56
·悄然 - 2025-3-25 18:39

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ mhhblog
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 115
·JS插件 : 47
·黑石音画 : 352
·代码集锦 : 55
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 373
·页面点击 : 394
·当前在线 : 26

用canvas画布绘制立方体

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

代码

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 发布: 这个六面带色了。。这么复杂的画法，代码看着却很简洁