用canvas画布绘制立方体
位置:
首页 >
代码集锦[发布: 2024.5.1 作者: 马黑 阅读: 422]
代码
<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 发布: 这个六面带色了。。这么复杂的画法，代码看着却很简洁
