Canvas制作旋转的太极的示例
- 作者: 优衣库库长丶
- 来源: 51数据库
- 2021-09-05
前言
好久没动canvas了,今下午突然想回顾一下,就写了个旋转的太极,哈哈,蛮好玩的,在这里就将自己写的过程展示出来,旋转使用的css实现的,没有用canvas自己的,希望大佬们不要吐槽。
css
body{ background: #ddd; } #canvas{ position: absolute; left: 40%; top: 30%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-animation: testanimate 3s linear infinite; -o-animation: testanimate 3s linear infinite; animation: testanimate 3s linear infinite; } @keyframes testanimate { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
html
<body> <canvas id="canvas" width="500" height="500"></canvas> </body>
js
let ctx = document .getelementbyid("canvas") .getcontext("2d"); // left-black-big ctx.beginpath(); ctx.fillstyle = "#000"; ctx.arc(250,250,200,math.pi/2,math.pi*1.5,false); ctx.closepath(); ctx.fill(); // right-white-big ctx.beginpath(); ctx.fillstyle = "#fff"; ctx.arc(250,250,200,math.pi/2,math.pi*1.5,true); ctx.closepath(); ctx.fill(); // top-black-middle ctx.beginpath(); ctx.fillstyle = "#000"; ctx.arc(250,150,100,math.pi/2,math.pi*1.5,true); ctx.closepath(); ctx.fill(); // bottom-white-middle ctx.beginpath(); ctx.fillstyle = "#fff"; ctx.arc(250,350,100,math.pi/2,math.pi*1.5,false); ctx.closepath(); ctx.fill(); // top-white-small ctx.beginpath(); ctx.fillstyle = "#fff"; ctx.arc(250,150,25,0,math.pi*2); ctx.closepath(); ctx.fill(); // bottom-black-small ctx.beginpath(); ctx.fillstyle = "#000"; ctx.arc(250,350,25,0,math.pi*2); ctx.closepath(); ctx.fill();
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读