วิธีการวาดนาฬิกาบนผืนผ้าใบ

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

การเรนเดอร์คือ

รหัสด้านบน:

 var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var ปี เดือน วัน ชั่วโมง วินาที นาที;//วาดฟังก์ชันการหมุนหมายเลข DrawClockPie(){ ctx.beginPath ( ); ctx.lineWidth = 2; ctx.จังหวะสไตล์ = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.closePath(); ctx.beginPath(150,150,6,0,2*คณิตศาสตร์.PI); ctx.fillStyle = 'สีแดง'; ctx.fill(); ctx.closePath();}// ฟังก์ชันมาตราส่วน DrawClockHours(){ เมื่อวาด *Math.PI); ctx.beginPath(); ctx.lineWidth = 5; '#333'; ctx.moveTo(0,-140); ctx.lineTo(0,-125); ctx.closePath(); }}// วาดฟังก์ชันย่อย DrawClockMins(){ สำหรับ (var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ctx.rotate(i*1/60*2*Math.PI); ctx.beginPath(); ctx.lineWidth = 3; ctx.moveTo(0 ,-140); ctx.lineTo(0,-133); ctx.จังหวะ(); ctx.closePath(); ctx.restore(); }}// วาดฟังก์ชันเข็มชั่วโมง DrawHourPin(){ ctx.save(); ctx.rotate((ชั่วโมง*60*60+นาที*) 60 +วินาที)/(12*60*60)*2*Math.PI); ctx.beginPath(); ctx.lineWidth = '#333'; ctx.moveTo(0,0); ctx.lineTo(0,-40); );}// วาดฟังก์ชันเข็มนาที DrawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((นาที*60+วินาที)/(60*60)*2*Math.PI); ctx.beginPath(); = 2; ctx.moveTo(0,0); ctx.lineTo(0,-60); ctx. stroke(); ctx.closePath(); ctx.restore();}// วาดฟังก์ชันมือสอง DrawSecPin(){ ctx.save(); ctx.rotate(second/60 *2 *Math.PI); ctx.beginPath(); ctx. strokeStyle = 'สีแดง'; = 1; ctx.moveTo(0,0); ctx.lineTo(0,-80); ctx.closePath(); ctx.restore();}// วาดฟังก์ชันข้อความ { ชั่วโมง = ชั่วโมง >= 12 ? ชั่วโมง - 12 : ชั่วโมง; var เวลา = 'ตอนนี้' + ปี + 'ปี' + เดือน + 'เดือน' + วัน + 'วัน' + ชั่วโมง + 'ชั่วโมง' + นาที + 'นาที' + วินาที + 'วินาที'; ctx.font = '15px ตัวหนา'; ctx.fillText(เวลา,24,350);}// รับฟังก์ชันเวลา getTimes(){ var date = วันที่ใหม่ (); ปี = date.getFullYear(); เดือน = date.getMonth() + 1; วัน = date.getDate(); date.getHours(); นาที = date.getMinutes(); วินาที = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600); DrawClockHours(); DrawClockMins(); getTimes(); DrawText(); DrawHourPin(); DrawSecPin();},1000);

แน่นอนว่าไม่จำเป็นต้องได้รับเวลาทุกวินาที แต่สามารถรับได้โดยตรงหนึ่งครั้งและเพิ่มทีละวินาที

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