No he tocado el lienzo durante mucho tiempo. De repente quise revisarlo esta tarde, así que escribí un Tai Chi giratorio. Es bastante divertido. Mostraré el proceso de escritura aquí. La rotación se implementa usando CSS. , no el lienzo en sí, espero que los grandes no se quejen.
CSS
cuerpo{ fondo: #ddd;}#canvas{ posición: absoluta; izquierda: 40%; arriba: 30%; -webkit-transform: traducir(-50%,-50%); %,-50%); -ms-transformar: traducir(-50%,-50%); -o-transformar: traducir(-50%,-50%); traducir (-50%, -50%); -webkit-animation: testAnimate 3s lineal infinito; -o-animation: testAnimate 3s lineal infinito; animación: testAnimate 3s lineal infinito;}@keyframes testAnimate { de { -webkit-transform: rotar(0); -moz-transformar: rotar(0); -ms-transformar: rotar(0); transformar: rotar (0) a { -webkit-transform: rotar (360 grados); -moz-transformar: rotar (360 grados); -ms-transformar: rotar (360 grados); transformar: rotar (360 grados);HTML
<cuerpo> <canvas id=ancho del lienzo=500 alto=500></canvas></body>
js
let ctx = document .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-middlectx.beginPath();ctx.fillStyle = #000;ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);ctx.closePath();ctx.fill();// bottom-white-middlectx.beginPath();ctx. llenarEstilo= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. llenarEstilo= #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();
Efecto
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.