Faz muito tempo que não toco na tela. De repente, tive vontade de revisá-la esta tarde, então escrevi um Tai Chi rotativo, é muito divertido, vou mostrar o processo de escrita aqui. , não a tela em si, espero que os grandes não reclamem.
CSS
corpo{ background: #ddd;}#canvas{ posição: absoluta esquerda: 40%; superior: 30%; %,-50%); -ms-transform: traduzir(-50%,-50%) -o-transformar: traduzir(-50%,-50%); traduzir (-50%, -50%); -webkit-animation: testAnimate 3s linear infinito; -o-animation: testAnimate 3s animação linear infinita: testAnimate 3s linear infinito;}@keyframes testAnimate { de { -webkit-transform: girar (0); -moz-transformar: girar (0); -ms-transformar: girar (0); transformar: girar (0); para { -webkit-transformar: girar (360 graus); -moz-transformar: girar (360 graus); transformar: girar (360 graus);HTML
<body> <canvas id=canvas width=500 height=500></canvas></body>
js
deixe ctx = documento .getElementById(canvas) .getContext(2d);// left-black-bigctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,250,200,Math.PI/2,Math.PI* 1.5,falso);ctx.closePath();ctx.fill();// right-white-bigctx.beginPath();ctx.fillStyle = #fff;ctx.arc(250.250.200,Math.PI/2,Math.PI*1.5,true);ctx.closePath();ctx.fill(); //top-black-middlelectx.beginPath();ctx.fillStyle = #000;ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);ctx.closePath();ctx.fill();// bottom-white-middlelectx.beginPath();ctx. estilopreenchimento= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. estilopreenchimento= #fff;ctx.arc(250,150,25,0,Math.PI*2);ctx.closePath();ctx.fill();// bottom-black-smallctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,350,25,0,Math.PI*2);ctx.closePath();ctx.fill();
Efeito
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.