Ich habe die Leinwand schon lange nicht mehr berührt, also habe ich heute Nachmittag ein rotierendes Tai Chi geschrieben. Ich werde den Prozess des Schreibens hier zeigen , nicht die Leinwand selbst, ich hoffe, die Großen werden sich nicht beschweren.
CSS
body{ Hintergrund: #ddd;}#canvas{ Position: absolute; links: 30%; -webkit-transform: Translate(-50%) %,-50 %); -ms-transform: Translate(-50 %,-50 %); Translate(-50%,-50%); -webkit-animation: testAnimate 3s linear unlimited;}@keyframes testAnimate { from { -webkit-transform: rotieren(0); -moz-transform: rotieren(0); -ms-transform: rotieren(0); transform: rotieren(0); } zu { -webkit-transform: rotieren(360deg); -ms-transform: rotieren(360deg); transformieren: rotieren (360 Grad); }}html
<body> <canvas id=canvas width=500 height=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,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. fillStyle= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. fillStyle= #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();
Wirkung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.