บทความนี้จะแนะนำโค้ดตัวอย่างของส่วนประกอบการนับถอยหลัง Canvas Ring และแบ่งปันกับทุกคน โดยมีรายละเอียดดังนี้:
เอฟเฟกต์ดังแสดงในรูปที่ 1:
ส่วนประกอบการนับถอยหลังของวงแหวนผ้าใบการนับถอยหลังของ Canvas Ring เป็นการนับถอยหลังที่ใช้งานโดยอิงจาก Canvas และแนะนำให้ใช้บนอุปกรณ์เคลื่อนที่
ที่อยู่การดาวน์โหลดนับถอยหลัง Canvas Ring
1. วิธีการใช้งาน1.โค้ด html
สามารถตั้งชื่อแอตทริบิวต์ ID ได้ตามใจชอบ
<canvas id=canvas></canvas>
2. แนะนำไฟล์ process.js
การอ้างอิงหน้า
<script src=js/process.js></script>
3. พารามิเตอร์การเริ่มต้น
เพียงแค่ยกตัวอย่าง
<script> window.onload = function () { la ctd = new Countdown(); ctd.init(); };</script> 2. คำอธิบายของพารามิเตอร์การตั้งค่าไม่จำเป็นต้องใช้พารามิเตอร์ต่อไปนี้และสามารถกำหนดค่าได้ตามความต้องการเฉพาะ
window.onload = function () { la ctd = new Countdown(); ctd.init({ id: canvas, // ID, canvas must have ID คุณลักษณะขนาด: 130, // ขนาดสูงสุดสำหรับการวาดวงกลม, width = เส้นขอบสูงกว้าง: 4, // ความกว้างของเส้นขอบ สีเส้นขอบ: #fff, // สีเส้นขอบสีด้านนอก: #fff, // ตารางเวลาสีวงกลมด้านล่างสุด สี: #fff, // แบบอักษรสีภาพเคลื่อนไหวของแถบความคืบหน้าสี: #fff, // สีแบบอักษรวงแหวนสี: #ffc720, // สีวงแหวนแถบความคืบหน้าสีด้านใน: #4e84e5, // แบบอักษรสีพื้นหลังวงกลมด้านในสุดขนาด: 50, เวลา: 5 }); 3. โค้ดตัวอย่างhtml
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title> <style> body { พื้นหลัง: #c2c1ce; } .container { ตำแหน่ง: ซ้ายแน่นอน; 50%; ด้านบน: 50%; การแปลง: แปล (-50%, -50%); ความกว้าง: 130px; กลาง; } </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script ><script> window.onload = function () { la ctd = new Countdown(); ctd.init(); };</script></body></html>เจส
/** * สร้างโดย Tan Xi เมื่อ 3/2561 */function Countdown() { // ตั้งค่าพารามิเตอร์เริ่มต้น this.settings = { id: canvas, // ID, canvas must have ID แอททริบิวต์ขนาด: 130, // ขนาดสูงสุดในการวาดวงกลม ความกว้าง = ความสูง เส้นขอบกว้าง: 4, // ความกว้างของเส้นขอบ สีเส้นขอบ: #fff, // สีเส้นขอบ สีด้านนอก: #fff, // ตารางเวลาสีวงกลมด้านล่างสุด สี: #fff, // แบบอักษรสีภาพเคลื่อนไหวของแถบความคืบหน้า สี: #fff, // วงแหวนสีแบบอักษร สี: #ffc720, // สีวงแหวนของแถบความคืบหน้า สีด้านใน: #4e84e5, // แบบอักษรสีพื้นหลังวงกลมด้านในสุด ขนาด : 50, เวลา: 5 }}Countdown.prototype.init = ฟังก์ชั่น (เลือก) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.settings, opt); this.countdown();};//วาดสีพื้นหลัง Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// วาดพื้นหลังภาพเคลื่อนไหวของแถบความคืบหน้า Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / วาดการนับถอยหลัง Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this. strokeBorder(this.settings.borderWidth);};// วาดภาพเคลื่อนไหวของแถบความคืบหน้า Countdown.prototype.drawAnimate = function () { // มุมการหมุน la deg = Math.PI / 180; v = กำหนดการ * 360, startAng = -90, endAng = -90 + v; this.ctx.beginPath(); this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2); this.ctx.arc (this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * องศา, endAng * องศา, เท็จ); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); this.ctx.closePath();};// วาดเส้นขอบ Countdown.prototype. strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx. strokeStyle = this.settings.borderColor; จังหวะ ();};// วาดข้อความ Countdown.prototype. strokeText = ฟังก์ชั่น (ข้อความ) { this.ctx.textAlign = center; this.ctx.textBaseline = กลาง; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; this.ctx.fillText (ข้อความ, this.settings.size / 2, this.settings.size / 2);};// วาดวงกลม Countdown.prototype.drawCircle = function (startAng, endAng, เส้นขอบ, fillColor) { ให้ deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * องศา, endAng * องศา, false); this.ctx.fillStyle = fillColor; this.ctx.fill(); this.ctx.closePath();};//ภาพเคลื่อนไหวของแถบความคืบหน้า Countdown.prototype.countdown = function () { la oldTime = +new Date(); timer = setInterval(() => { la allMs = this.settings. เวลา * 1,000, // เช่น 30*1,000=30 000ms currentTime = +วันที่ใหม่(); ขนาดขั้นตอน = (เวลาปัจจุบัน - เวลาที่ผ่านมา) / จำนวนวินาทีทั้งหมด = (เวลาปัจจุบัน - oldTime) / allMs; this.schedule = schedule; this.drawAll(schedule); วาด this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); clearInterval(timer); } }, 100);};// วาดทั้งหมด Countdown.prototype.drawAll = function (schedule) { schedule = schedule >= 1 ? 1 : schedule; la text = parseInt(this.settings.time * (1 - กำหนดการ)) + 1; // ล้างแคนวาส this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); สิ่งนี้ obj2){ obj1[attr] = obj2[attr]; 4.งานเตรียมผ้าใบเพิ่มเติมในความเป็นจริง Canvas ไม่ได้ลึกลับขนาดนั้น ไม่มีอะไรมากไปกว่าแท็ก H5 เช่นเดียวกับแท็ก HTML อื่นๆ:
<canvas id=canvas></canvas>
โปรดทราบว่าวิธีที่ดีที่สุดคือตั้งค่าความกว้างและความสูงของผืนผ้าใบที่จุดเริ่มต้น (หากคุณไม่ได้ตั้งค่าความกว้างและความสูง เบราว์เซอร์จะตั้งค่าเริ่มต้นให้ขนาดผืนผ้าใบเป็นกว้าง 300 พิกเซลและสูง 100 พิกเซล) และไม่สามารถ ตั้งค่าโดยใช้ CSS (จะถูกดึงส่วนขยาย) แนะนำให้เขียนโดยตรงภายในแท็ก Canvas:
<canvas id=ความกว้างของผ้าใบ=130 ความสูง=130></canvas>
Canvas เองไม่มีความสามารถในการวาดภาพใดๆ และงานวาดภาพทั้งหมดจะดำเนินการผ่าน js โดยปกติแล้วเราใช้ getElementById ใน js เพื่อให้ canvas ใช้งานได้ (ซึ่งหมายความว่าเราต้องตั้งค่า id สำหรับ canvas):
var c = document.getElementById(ผ้าใบ);var ctx = c.getContext(2d);
1. หลังจากเตรียมแปรงแล้ว คุณสามารถเริ่มวาดได้ จริงๆ แล้ววงแหวนเป็นวงกลมที่มีศูนย์กลางที่มีรัศมีต่างกัน พิกัดศูนย์กลางคือ (ขนาด/2, ขนาด/2) ขั้นแรกให้วาดวงกลมด้านล่างสีขาวที่ใหญ่ที่สุดโดยมีรัศมีขนาด/2 .
ให้ deg = Math.PI / 180; // beginningPath() สามารถแยกเอฟเฟกต์การวาดเส้นทางและป้องกันไม่ให้เอฟเฟกต์ก่อนหน้าถูกปนเปื้อน ctx.beginPath();// tcx.arc(จุดศูนย์กลางวงกลม, 360 * องศา, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
2. เริ่มวาดวงกลมด้านล่างสีเหลืองอันที่สอง โดยจุดศูนย์กลางของวงกลมจะเป็น (ขนาด/2, ขนาด/2) แต่รัศมีจะเล็กกว่าวงกลมด้านล่างสีขาว 4px ดังนั้นรัศมีของวงกลมด้านล่างสีเหลืองคือ (ขนาด /2-4)
ให้ deg = Math.PI / 180; // beginningPath() สามารถแยกเอฟเฟกต์การวาดเส้นทางและป้องกันไม่ให้เอฟเฟกต์ก่อนหน้าถูกปนเปื้อน ctx.beginPath();//tcx.arc(ศูนย์กลางวงกลม 0* องศา, 360 * องศา, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
3. เริ่มวาดวงกลมด้านในสีน้ำเงิน โดยให้ศูนย์กลางของวงกลมเป็น (ขนาด/2,ขนาด/2) และรัศมีเป็น (ขนาด-23) จากนั้นเพิ่มเส้นขอบสีขาวขนาด 4px ลงไป
ให้ deg = Math.PI / 180; // beginningPath() สามารถแยกเอฟเฟกต์การวาดเส้นทางและป้องกันไม่ให้เอฟเฟกต์ก่อนหน้าถูกปนเปื้อน ctx.beginPath();// tcx.arc (ศูนย์กลางวงกลม 0* องศา, 360 * องศา, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// ขอบสีขาว ctx.lineWidth = 4;ctx. strokeStyle = #fff;ctx. stroke();
4. วาดข้อความและจัดกึ่งกลางในแนวตั้ง
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (ข้อความ, พิกัด X สัมพันธ์กับผืนผ้าใบ, พิกัด Y สัมพันธ์กับผืนผ้าใบ) ctx.fillText(30, ขนาด / 2 , ขนาด / 2);
5. จะสร้างแอนิเมชั่นได้อย่างไร? จริงๆ แล้วมันเป็นกระบวนการวาดวงกลมสีขาวด้วย ซึ่งเป็นกระบวนการที่ค่อยๆ ครอบคลุมแถบความคืบหน้าสีเหลือง จากนั้นจึงวาดวงกลมสีขาวก่อน ในเวลานี้ วงกลมสีน้ำเงินจะถูกปกคลุมไปด้วยวงกลมเคลื่อนไหวสีขาว วงกลมสีน้ำเงินสุดท้ายจะถูกวาดออกมา
ให้ deg = Math.PI / 180;ctx.beginPath();// tcx.arc(ศูนย์กลางวงกลม X, ศูนย์กลางวงกลม Y, รัศมี, มุมเริ่มต้น, มุมสิ้นสุด, ตามเข็มนาฬิกาและทวนเข็มนาฬิกา);ctx.arc(ขนาด / 2, ขนาด / 2, ขนาด / 2-4, 0* องศา, 360 * องศา, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
6. กระบวนการวาดภาพที่ค่อนข้างง่ายเสร็จสมบูรณ์ ต่อไป เราจำเป็นต้องเชื่อมโยงแอนิเมชั่นกับตัวเลข โดยใช้เวลาล่าสุด - เวลาที่เก่าที่สุด จากนั้นหารเวลาทั้งหมด เราจะได้เปอร์เซ็นต์ที่สำคัญ การเปลี่ยนแปลงของตัวเลขและมุมที่วาดวงกลมเคลื่อนไหวสีขาว
Countdown.prototype.countdown = function () { la oldTime = +new Date(); // เวลาที่ผ่านมา: 1522136419291 timer = setInterval(() => { la currentTime = +new Date(); // เวลาปัจจุบัน: 1522136419393 ให้ allMs = this.settings.time * 1,000;// เวลาทั้งหมดเป็นวินาที: เช่น 30*1,000=30 000ms schedule = (currentTime - oldTime) / allMs;// เปอร์เซ็นต์การวาด: (1522136419393-1522136419291)/30000=0.0204 this.schedule = schedule; this.drawAll(schedule); ถ้า (เวลาปัจจุบัน - oldTime >= allMs) { // วาด this.drawBackground(); this.drawAnimate(); this.drawInner(); clearInterval(timer } }, 10);}; .prototype.drawAll = function (schedule) { schedule = schedule >= 1 ? 1 : schedule; ให้ text = parseInt(this.settings.time * (1 - กำหนดการ)) + 1; // ล้างผ้าใบ this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawAnimate ( ); this.drawInner(); this. strokeText(text);};// วาดภาพเคลื่อนไหวของแถบความคืบหน้า Countdown.prototype.drawAnimate = function () { // มุมการหมุน ให้ deg = Math.PI / 180; ให้ v = กำหนดการ * 360, startAng = -90,//มุมเริ่มต้น endAng = -90 + v;//มุมสิ้นสุด this.ctx.beginPath(); this.ctx.moveTo(this.settings .size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); this.ctx.closePath();} ;เวอร์ชันที่มุ่งเน้นกระบวนการ
/** * ภาพเคลื่อนไหวของแถบความคืบหน้า*/ countdown: function () { this.getSystemInfo().then(v => { // Adaptive ให้ width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; size = parseInt(size); size = size % 2 ? size + 1 : size; ให้ maxtime =30, sTime = +new Date, temp = setInterval(() => { ให้เวลา = maxtime * 1000, currentTime = +new Date, schedule = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // วาดข้อความ this.setData({ schedule: 0 }); clearInterval(temp); }; วาด*/ ดึง: ฟังก์ชั่น (กำหนดการ, วาล, ขนาด) { size = size ||. const _ts = this; schedule = schedule >= 1 ? 1 : schedule; la text = parseInt(val - val * schedule), r = ขนาด / 2, deg = Math.PI / 180; _ts.setData({ ความกว้าง: ขนาด, ความสูง: ขนาด, กำหนดการ: ข้อความ + 1 }); ล้างผ้าใบ ctx.clearRect(0, 0, ขนาด, ขนาด); // วาดพื้นหลังสีขาว ctx.beginPath(); ctx.arc(r, r, r, 0 * deg, 360 * deg); = 'rgba(255,255,255,1)'; ctx.closePath(); ctx.fill(); วาดสีส้ม ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg); ctx.fill(); // วาดแถบความคืบหน้าสีขาว ให้ v = schedule * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * องศา, (-90 + v) * องศา); (); ctx.fill(); // ตรงกลางด้านล่าง ctx.beginPath(); r - 12, 0 * องศา, 360 * องศา); ctx.fillStyle = 'rgba(90,140,220,1)'; การวาดภาพแบบรวม ctx.draw(); },ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network