在canvas画布中绘制立体正五角星

评论资讯 [ 总 265 则 ]

友情链接

网站统计

·前端三套件 : 102
·JS插件 : 41
·黑石音画 : 275
·代码集锦 : 48
·小工具集合 : 20
·网友作品精选 : 5

·今日访问 : 135
·页面点击 : 135
·当前在线 : 4

在canvas画布中绘制立体正五角星

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

效果

var ctx = canv.getContext('2d');

var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];

for(var i = 0; i < 5; i ++) {

var x1 = Math.cos((18 + i * 72) / 180 * Math.PI) * r1 + size,

y1 = -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + size,

x2 = Math.cos((54 + i * 72) / 180 * Math.PI) * r2 + size,

y2 = -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + size;

points.push({x1: x1, y1: y1, x2: x2, y2: y2});

}

var drawTriangle = () => {

for(var j = 0; j < 5; j++) {

ctx.beginPath();

ctx.moveTo(points[j].x1, points[j].y1);

ctx.lineTo(size, size);

ctx.lineTo(points[j].x2, points[j].y2);

ctx.lineTo(points[j].x1, points[j].y1);

ctx.fill();

}

};

var draw5star = () => {

ctx.fillStyle = 'red';

drawTriangle();

ctx.save();

ctx.fillStyle = 'darkred';

ctx.translate(size, size);

ctx.scale(-1, 1);

ctx.translate(-size, -size);

drawTriangle();

ctx.restore();

};

draw5star();

</script>

发表评论:

评论列表 [2条]

#2 | 小希于 2024-5-3 11:41 发布: 这个加上阴影要处理的点不是更多么。。感觉应该比正方体还复杂。。艾玛，看代码就这么一丢丢。。

#1 | 悄然于 2024-5-3 11:19 发布: 这个五角星好立体啊。。再整个发光粒子，八一电影制片厂片头就有了。哈哈。。