马黑PHP整站系统

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

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

效果

代码

<canvas id="canv" width="400" height="400"></canvas> <script>   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>

前一篇: 用canvas画布绘制立方体
下一篇: canvas画布:让立体正五角星转起来

发表评论:

       

评论列表 [2条]

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

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

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