โค้ดตัวอย่างสำหรับ Canvas เพื่อใช้ภาพเคลื่อนไหวของแถบความคืบหน้าแบบวงกลม

บทความนี้จะแนะนำการใช้งานแอนิเมชั่นแถบความคืบหน้าแบบวงกลมบนผืนผ้าใบและแบ่งปันกับทุกคนโดยมีรายละเอียดดังนี้:

ผมขอแสดงการเรนเดอร์ให้คุณดูก่อน จากนั้นจึงเพิ่มโค้ด

ภาพเคลื่อนไหวแถบความคืบหน้า

ความกว้างและความสูงของผืนผ้าใบเป็นคุณสมบัติของตัวเองและต้องตั้งค่าในลักษณะอินเทอร์ไลน์ หากคุณตั้งค่าความกว้างและความสูงตามสไตล์ รูปภาพที่คุณวาดจะผิดรูป

 <canvas id=mycanvas width=100 height=100>70%</canvas>

แนวคิดหลัก: การเรนเดอร์ประกอบด้วยวงกลมสามวง เลเยอร์ด้านนอกสุดเป็นวงกลมขนาดใหญ่ที่มีขอบสีดำ ภายในวงกลมที่เปลี่ยนความคืบหน้าของแถบความคืบหน้าและวงกลมที่มีเปอร์เซ็นต์ตามความเป็นจริง

หมายเหตุ: แต่ละครั้งที่มีการวาดวงกลม จะต้องสร้างเลเยอร์ใหม่ เพื่อให้สามารถกำหนดสไตล์ของแต่ละเลเยอร์ได้อย่างอิสระโดยไม่กระทบต่อกัน เช่นเดียวกับเลเยอร์ใน PS ร่างการออกแบบที่สมบูรณ์จะประกอบด้วยหลายเลเยอร์

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function Draw(i){// กรอบวงกลมขนาดใหญ่ context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.สโตรกสไตล์ = สีเทา;บริบท.จังหวะ();// context.beginPath();var grd =. วงกลมใหญ่ context.createLinearGradient(15,15,80,80);grd.addColorStop(0,red);grd.addColorStop(0.5,สีเหลือง);grd.addColorStop(1,สีน้ำเงิน);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context. strokeStyle = grd;context. stroke();// context.fillStyle = grd;// context.fill();// วงกลมเล็ก context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context. strokeStyle = สีเทา;context. stroke();context.fillStyle = สีขาว;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = สีดำ;context.fillText(i+%,50 , 50);}

ใช้เมธอด context.clearRect() เพื่อล้างแคนวาส

 var i = 0;var ความคืบหน้า = parseInt(canvas.innerHTML);// console.log (ความคืบหน้า);var timer = setInterval(function(){if(i >= ความคืบหน้า){clearInterval(timer);}context.clearRect (0,0,canvas.width,canvas.height);วาด(i);i++;},50);

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network