ไม่ได้สัมผัสผืนผ้าใบมานานแล้ว จู่ๆ ฉันก็อยากทบทวนเรื่องนี้ ก็เลยเขียนท่าไทเก็กแบบหมุนเวียน 555 สนุกมาก ฉันจะสาธิตวิธีการเขียนแบบหมุนเวียนที่นี่ ไม่ใช่ผืนผ้าใบเอง ฉันหวังว่าคนตัวใหญ่จะไม่บ่น
ซีเอสเอส
body{ พื้นหลัง: #ddd;}#canvas{ ตำแหน่ง: สัมบูรณ์; ซ้าย: 40%; ด้านบน: 30%; -webkit-transform: แปล (-50%,-50%); -moz-transform: แปล (-50 %,-50%); -ms-transform: แปล (-50%,-50%); -o-transform: แปล (-50%,-50%); แปล (-50%,-50%); -webkit-animation: testAnimate 3s linear infinite; -o-animation: testAnimate 3s linear infinite; หมุน (0); -moz-transform: หมุน (0); -ms-transform: หมุน (0); -o-transform: หมุน (0); แปลงร่าง: หมุน (0); } ถึง { -webkit-transform: หมุน (360deg); -moz-transform: หมุน (360deg); -ms-transform: หมุน (360deg); แปลงร่าง: หมุน (360deg); }}html
<body> <canvas id=ความกว้างของผ้าใบ=500 ความสูง=500></canvas></body>
เจส
ให้ 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,เท็จ);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();// ด้านล่างสีขาว-middlectx.beginPath();ctx. เติมสไตล์= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx.closePath();ctx.fill();// top-white-smallctx.beginPath();ctx. เติมสไตล์= #fff;ctx.arc(250,150,25,0,Math.PI*2);ctx.closePath();ctx.fill();// ด้านล่าง-สีดำ-smallctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,350,25,0,Math.PI*2);ctx.closePath();ctx.fill();
ผล
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network