JS+Canvas绘制时钟效果

本文实例为大家分享了使用canvas绘制时钟的具体代码，供大家参考，具体内容如下
1. clock.html

<！doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</title> </head> <body><canvas id="canvas" width="300" height="300"></canvas><script>var canvas=document.getElementById（"canvas"）;var context=canvas.getContext（"2d"）;//draw（）;function draw（）{//得到当前系统的时分秒var now=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）;//初始化画布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（）; //表框//小时刻度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（）; //分钟刻度context.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（）; //画上时针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（）;} window.onload=function（）{setInterval（draw,1000）}</script> </body></html>

2. JavaScript代码

<script>var canvas=document.getElementById（"canvas"）;var context=canvas.getContext（"2d"）;//draw（）;function draw（）{//得到当前系统的时分秒var now=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）;//初始化画布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（）; //表框//小时刻度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（）; //分钟刻度context.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（）; //画上时针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（）;} window.onload=function（）{setInterval（draw,1000）}</script>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。