شاركت هذه المقالة الرمز المحدد لاستخدام قماش لرسم الساعة للرجوع إليه. المحتوى المحدد كما يلي
1. clock.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "description" content = ""> title> canvas clock </title> </head> <body> <canvas id = "canvas"> </canvas> varip var context = canvas.getContext ('2d') ؛ //يرسم()؛ دالة draw () {// احصل على الوقت والدقيقة والثانية من النظام الحالي var now = new Date () ؛ var sec = now.getSeconds () ؛ var min = now.getMinutes () ؛ var hour = now.gethours () ؛ ساعة> = 12 && (ساعة = الساعة 12) ؛ var radius = math.min (canvas.width/2 ، canvas.height/2) ؛ // تهيئة canvas context.save () ؛ context.clearrect (0،0 ، canvas.width ، canvas.height) ؛ context.translate (canvas.width/2 ، canvas.height/2) ؛ context.rotate (-math.pi/2) ؛ context.save () ؛ // table box // scale context.strokestyle = "Black" ؛ context.fillStyle = "Black" ؛ context.linewidth = 3 ؛ context.linecap = "round" ؛ context.beginPath () ؛ لـ (var i = 0 ؛ i <12 ؛ i ++) {context.rotate (math.pi/6) ؛ Context.Moveto (RADIUS-30،0) ؛ context.lineto (RADIUS-10،0) ؛ } context.stroke () ؛ context.restore () ؛ context.save () ؛ // minute scale context.linewidth = 2 ؛ context.beginPath () ؛ لـ (var i = 0 ؛ i <60 ؛ i ++) {if (! i ٪ 5 == 0) {context.moveto (radius-15،0) ؛ context.lineto (RADIUS-10،0) ؛ } context.rotate (math.pi/30) ؛ } context.stroke () ؛ context.restore () ؛ context.save () ؛ // ارسم سياق HOUR HAND.ROTATE ((Math.PI/6)*ساعة+(Math.PI/360)*Min+(Math.pi/21600)*Sec) ؛ context.linewidth = 6 ؛ context.beginPath () ؛ context.moveto (-10،0) ؛ context.lineto (نصف القطر*0.5،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ context.rotate ((Math.pi/30)*min+(math.pi/1800)*sec) ؛ context.strokestyle = "#29a8de" ؛ context.linewidth = 4 ؛ context.linecap = "butt" ؛ context.beginPath () ؛ context.moveto (-20،0) ؛ context.lineto (RADIUS*0.7،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ conext.rotate (sec*math.pi/30) ؛ context.strokestyle = "red" ؛ context.linewidth = 2 ؛ context.linecap = "butt" ؛ context.beginPath () ؛ context.moveto (-30،0) ؛ context.lineto (نصف القطر*0.9،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ context.linewidth = 4 ؛ context.strokestyle = "Gray" ؛ context.beginPath () ؛ Context.Arc (0،0 ، RADIUS ، 0 ، Math.pi*2 ، true) ؛ سياق. ضربة () ؛ context.restore () ؛ context.restore () ؛ context.restore () ؛ } window.onload = function () {setInterval (draw ، 1000)} </script> </body> </html>2. كود جافا سكريبت
<script> var canvas = document.getElementById ("canvas") ؛ var context = canvas.getContext ('2d') ؛ //يرسم()؛ دالة draw () {// احصل على الوقت والدقائق من النظام الحالي var الآن = تاريخ جديد () ؛ var sec = now.getSeconds () ؛ var min = now.getMinutes () ؛ var hour = now.gethours () ؛ ساعة> = 12 && (ساعة = الساعة 12) ؛ var radius = math.min (canvas.width/2 ، canvas.height/2) ؛ // تهيئة convas context.save () ؛ context.clearrect (0،0 ، canvas.width ، canvas.height) ؛ context.translate (canvas.width/2 ، canvas.height/2) ؛ context.rotate (-math.pi/2) ؛ context.save () ؛ // table box // scale context.strokestyle = "Black" ؛ context.fillStyle = "Black" ؛ context.linewidth = 3 ؛ context.linecap = "round" ؛ context.beginPath () ؛ لـ (var i = 0 ؛ i <12 ؛ i ++) {context.rotate (math.pi/6) ؛ Context.Moveto (RADIUS-30،0) ؛ context.lineto (RADIUS-10،0) ؛ } context.stroke () ؛ context.restore () ؛ context.save () ؛ // minute scale context.linewidth = 2 ؛ context.beginPath () ؛ لـ (var i = 0 ؛ i <60 ؛ i ++) {if (! i ٪ 5 == 0) {context.moveto (radius-15،0) ؛ context.lineto (RADIUS-10،0) ؛ } context.rotate (math.pi/30) ؛ } context.stroke () ؛ context.restore () ؛ context.save () ؛ // ارسم سياق HOUR HAND.ROTATE ((Math.PI/6)*ساعة+(Math.PI/360)*Min+(Math.pi/21600)*Sec) ؛ context.linewidth = 6 ؛ context.beginPath () ؛ context.moveto (-10،0) ؛ context.lineto (نصف القطر*0.5،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ context.rotate ((Math.pi/30)*min+(math.pi/1800)*sec) ؛ context.strokestyle = "#29a8de" ؛ context.linewidth = 4 ؛ context.linecap = "butt" ؛ context.beginPath () ؛ context.moveto (-20،0) ؛ context.lineto (RADIUS*0.7،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ conext.rotate (sec*math.pi/30) ؛ context.strokestyle = "red" ؛ context.linewidth = 2 ؛ context.linecap = "butt" ؛ context.beginPath () ؛ context.moveto (-30،0) ؛ context.lineto (نصف القطر*0.9،0) ؛ سياق. ضربة () ؛ context.restore () ؛ context.save () ؛ context.linewidth = 4 ؛ context.strokestyle = "Gray" ؛ context.beginPath () ؛ Context.Arc (0،0 ، RADIUS ، 0 ، Math.pi*2 ، true) ؛ سياق. ضربة () ؛ context.restore () ؛ context.restore () ؛ context.restore () ؛ } window.onload = function () {setInterval (draw ، 1000)} </script>ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.