Je n'ai pas touché à la toile depuis longtemps. J'ai soudain eu envie de la revoir cet après-midi, alors j'ai écrit un Tai Chi en rotation, c'est assez amusant, je vais montrer le processus d'écriture ici. La rotation est implémentée en CSS. , pas la toile elle-même, j'espère que les grands ne se plaindront pas.
css
corps{ arrière-plan : #ddd;}#canvas{ position : absolue ; gauche : 40 % ; haut : 30 % ; -webkit-transform : traduire (-50 %, -50 %); %,-50%); -ms-transform: traduire(-50%,-50%); -o-transform: traduire(-50%,-50%); traduire (-50%, -50%); -webkit-animation : testAnimate 3s linéaire infini ; -o-animation : testAnimate 3s linéaire infini ;}@keyframes testAnimate { from { -webkit-transform : rotation(0); -moz-transform : rotation(0); -ms-transform : rotation(0); transformer : rotation(0); transformer : rotation (360 deg ); }}HTML
<body> <canvas id=canvas width=500 height=500></canvas></body>
js
laissez 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,false);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. Style de remplissage = #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. Style de remplissage = #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();
Effet
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.