しばらくキャンバスに触れていなかったので、今日の午後、突然回転太極拳を書きました。笑 回転は CSS を使用して実装されています。キャンバス自体ではありませんが、大手が文句を言わないことを願っています。
css
body{ 背景: #ddd;}#canvas{ 位置: 絶対; 左: 40%; -webkit-transform: 変換(-50%,-50%); %,-50%); -ms-transform: 変換(-50%,-50%); -o-transform: 変換:変換(-50%,-50%); -webkit-animation: testAnimate 3s リニア無限; -o-animation: testAnimate 3s リニア無限; }@keyframes testAnimate { from { -webkit-transform:回転(0); -moz-変換: 回転(0); -ms-変換: 回転(0);変換: 回転(0); } から { -webkit-transform: 回転(360 度); -ms-transform: 回転(360 度);変換: 回転(360度) }}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();
効果
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。