马黑PHP整站系统

canvas画布:让立体正五角星转起来

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

效果

代码

<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 = []; var deg = 0, step = 0.5, mov = true, raf = null; 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 draw5star = () => { for(var j = 0; j < 5; j++) { ctx.beginPath(); ctx.fillStyle = 'red'; 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(); ctx.beginPath(); ctx.fillStyle = 'darkred'; var k = j > 0 ? j - 1 : 4; ctx.moveTo(points[j].x1, points[j].y1); ctx.lineTo(size, size); ctx.lineTo(points[k].x2, points[k].y2); ctx.moveTo(points[j].x1, points[j].y1); ctx.fill(); } };   var rot = () => {     ctx.clearRect(0, 0, canv.width, canv.height);     ctx.save();     ctx.translate(size, size);     ctx.rotate(deg * Math.PI / 180);     ctx.translate(-size, -size);     draw5star();     ctx.restore();     deg = (deg + step) % 360;     mov ? raf = requestAnimationFrame(rot) : cancelAnimationFrame(raf); };   canv.onclick = () => {     mov = !mov;     rot(); };   rot(); </script>

前一篇: 在canvas画布中绘制立体正五角星
下一篇: canvas画布:绘制转动的椭圆形环绕文本

发表评论:

       

评论列表 [1条]

#1 | 飞飞 于 2024-5-9 18:43 发布: 喵~妙~

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