كيفية رسم ساعة على القماش

يقدم هذا المقال كيفية رسم ساعة على القماش ويشاركها مع الجميع والتفاصيل هي كما يلي:

التقديم هو

الرمز أعلاه:

 var Canvas = document.getElementById('canvas');var ctx = Canvas.getContext('2d');var year,month,day,hour,thank,min;// ارسم وظيفة الطلب drawClockPie(){ ctx.beginPath ( ctx.lineWidth = 2 ctx.strokeStyle = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx. ClosePath(); ctx.beginPath(); ctx.fillStyle = 'red'؛ دالة القياس drawClockHours(){ عند الرسم *ctx.beginPath(); ctx.lineWidth = 5; '#333'; ctx.moveTo(0,-140); ctx.lineTo(0,-125); ctx. ClosePath(); ctx.restore(); drawClockMins(){ for(var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ctx.rotate(i*1/60*2*Math.PI); ctx.lineWidth = 3; ctx.strokeStyle = '#333'; ,-140); ctx.lineTo(0,-133); ctx. ClosePath(); ctx.restore(); }}// رسم عقرب الساعة drawHourPin(){ ctx.save(); 60 +ثانية)/(12*60*60)*2*Math.PI); ctx.strokeStyle = '#333'; ctx.lineWidth = 3; ctx.lineTo(0,-40); );}// رسم عقرب الدقائق function drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((دقيقة*60+ثانية)/(60*60)*2*Math.PI); ctx.strokeStyle = '#333'; = 2; ctx.moveTo(0,0); ctx.stroke(); ctx. ClosePath(); ctx.restore();}// ارسم الدالة المستعملة drawSecPin(){ ctx.save(); *2 *Math.PI); ctx.beginPath(); ctx.strokeStyle = 'red'; = 1; ctx.moveTo(0,0); ctx.lineTo(0,-80); ctx. ClosePath(); }// رسم وظيفة النص drawText(); { ساعة = ساعة >= 12 ? ساعة - 12 : ساعة var time = "الآن" + سنة + "سنة" + شهر + "شهر" + يوم + "يوم" + ساعة؛ + 'ساعة' + دقيقة + 'دقيقة' + ثانية + 'ثانية'؛ ctx.font = '15px جريئة'; (); date.getHours(); دقيقة = date.getMinutes(); Second = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600); drawClockPie(); drawClockHours(); drawClockMins(); drawTimes(); drawSecPin();},1000);

وبطبيعة الحال، لا يلزم الحصول على الوقت كل ثانية، ولكن يمكن الحصول عليه مباشرة مرة واحدة وزيادته بالثواني.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.