canvas旋转太极图效果
分类:实例代码
canvas旋转太极图效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了太极八卦图的旋转效果,感兴趣的朋友可以做一下分析。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <body> <canvas id="myCanvas" width="500" height="500" >浏览器不支持</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); var angle = 0; var count = 360; var clrA = '#000'; var clrB = 'red'; function taiji(x, y, radius, angle, wise) { angleangle = angle || 0; wisewise = wise ? 1 : -1; ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.fillStyle = clrA; ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(0, 0, radius, 0, Math.PI, false); ctx.fill(); ctx.fillStyle = clrB; ctx.beginPath(); ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrA; ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = clrB; ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); } loop = setInterval(function () { beginTag = true; ctx.clearRect(0, 0, canvas.width, canvas.height); taiji(200, 200, 50, Math.PI * (angle / count) * 2, true); angle = (angle + 5) % count; }, 50); </script> </body> </html>
canvas旋转太极图效果,这样的场景在实际项目中还是用的比较多的,关于canvas旋转太极图效果就介绍到这了。