Sudah lama saya tidak menyentuh kanvas, tiba-tiba saya ingin mengulasnya sore ini, jadi saya menulis Tai Chi yang berputar. Haha, cukup menyenangkan. Saya akan tunjukkan proses penulisannya di sini , bukan kanvasnya sendiri, saya harap orang-orang besar tidak akan mengeluh.
css
body{ latar belakang: #ddd;}#canvas{ posisi: absolut; kiri: 40%; atas: 30%; -transformasi webkit: terjemahan(-50%,-50%); %,-50%); -ms-transformasi: terjemahkan(-50%,-50%); -o-transformasi: terjemahkan(-50%,-50%); terjemahkan(-50%,-50%); -webkit-animasi: testAnimate 3s linier tak terbatas; -o-animasi: testAnimate 3s linier tak terbatas; animasi: testAnimate 3s linier tak terbatas;}@keyframes testAnimate { dari { -webkit-transform: putar(0); -moz-transformasi: putar(0); -ms-transformasi: putar(0); transformasi: putar(0); } menjadi { -transformasi webkit: putar(360deg); -moz-transformasi: putar(360deg); -ms-transformasi: putar(360deg); transformasi: putar (360 derajat); }}html
<body> <kanvas id=lebar kanvas=500 tinggi=500></canvas></body>
js
biarkan ctx = dokumen .getElementById(kanvas) .getContext(2d);// left-black-bigctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,250,200,Math.PI/2,Math.PI* 1.5,salah);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. gaya isi= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. gaya isi= #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();
Memengaruhi
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.