この記事では、Canvasを使用して参照用のクロックを描画するための特定のコードを共有しています。特定のコンテンツは次のとおりです
1。Clock.html
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "descontion" content = "" "> <title> canvas clock </head> </head> <body> <canvas id =" canvas "> </canvas> var context = canvas.getContext（ '2d'）; //描く（）; function draw（）{//現在のシステムの時間、分、秒を取得var = new date（）; var sec = now.getSeconds（）; var min = now.getMinutes（）; var hour = now.gethours（）; hour> = 12 &&（hour = hour-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（）; //テーブルボックス// hour scale context.strokestyle = "black"; context.fillstyle = "black"; Context.LineWidth = 3; context.linecap = "round"; context.beginpath（）; for（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（）; //微小スケールコンテキスト.linewidth = 2; context.beginpath（）; for（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（）; // hourd Hand Context.rotate（（Math.pi/6）*hour+（math.pi/360）*min+（math.pi/21600）*sec）; Context.LineWidth = 6; context.beginpath（）; Context.Moveto（-10,0）; Context.lineto（radius*0.5,0）; context.stroke（）; 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.stroke（）; context.restore（）; context.save（）; context.rotate（sec*math.pi/30）; context.strokestyle = "red"; Context.LineWidth = 2; context.linecap = "butt"; context.beginpath（）; Context.Moveto（-30,0）; Context.lineto（radius*0.9,0）; context.stroke（）; context.restore（）; context.save（）; Context.LineWidth = 4; context.strokestyle = "gray"; context.beginpath（）; context.arc（0,0、radius、0、math.pi*2、true）; context.stroke（）; context.restore（）; context.restore（）; context.restore（）; } window.onload = function（）{setInterval（draw、1000）} </script> </body> </html>2。JavaScriptコード
<script> var canvas = document.getElementById（ "canvas"）; var context = canvas.getContext（ '2d'）; //描く（）; function draw（）{//現在のシステムの時間と分を取得var = new date（）; var sec = now.getSeconds（）; var min = now.getMinutes（）; var hour = now.gethours（）; hour> = 12 &&（hour = hour-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（）; //テーブルボックス// hour scale context.strokestyle = "black"; context.fillstyle = "black"; Context.LineWidth = 3; context.linecap = "round"; context.beginpath（）; for（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（）; //微小スケールコンテキスト.linewidth = 2; context.beginpath（）; for（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（）; // hourd Hand Context.rotate（（Math.pi/6）*hour+（math.pi/360）*min+（math.pi/21600）*sec）; Context.LineWidth = 6; context.beginpath（）; Context.Moveto（-10,0）; Context.lineto（radius*0.5,0）; context.stroke（）; 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.stroke（）; context.restore（）; context.save（）; context.rotate（sec*math.pi/30）; context.strokestyle = "red"; Context.LineWidth = 2; context.linecap = "butt"; context.beginpath（）; Context.Moveto（-30,0）; Context.lineto（radius*0.9,0）; context.stroke（）; context.restore（）; context.save（）; Context.LineWidth = 4; context.strokestyle = "gray"; context.beginpath（）; context.arc（0,0、radius、0、math.pi*2、true）; context.stroke（）; context.restore（）; context.restore（）; context.restore（）; } window.onload = function（）{setInterval（draw、1000）} </script>上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。