canvas中画布时钟的简单事例

这是以前自己练习写的一个画布时钟

　　
   　　　　
   　　　　
   　　　　
　　
　　
　　　　

　　　　<script><br>    　　　　　　var can=document.getElementsByTagName("canvas")[0];<br>    　　　　　　var x=can.getContext("2d");<br><br>    　　　　　　function clock(){</p> <p>　　　　　　　　//每次执行代码清楚一次画布<br>        　　　　　　　　x.clearRect(0,0,500,500);</p> <p>　　　　　　　　//画一个蓝色实心圆<br>     　　　　　　　　x.beginPath();<br>　　　　　　　　x.fillStyle="blue";<br>　　　　　　　　x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);<br>　　　　　　　　x.fill();<br>　　　　　　　　x.closePath();</p> <p>　　　　　　　　//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环<br>　　　　　　　　x.beginPath();<br>　　　　　　　　x.fillStyle="#ffffff";<br>　　　　　　　　x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);<br>　　　　　　　　x.fill();<br>　　　　　　　　x.closePath();</p> <p><br>    　　　　　　　　//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔<br>　　　　　　　　for(var i=0;i<60;i++){<br/>　　　　　　　　　　x.save(); //保存环境变量<br/>　　　　　　　　　　x.beginPath();<br/>　　　　　　　　　　x.lineWidth=2;<br/>　　　　　　　　　　x.translate(250,250);<br/>　　　　　　　　　　x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度<br/>　　　　　　　　　　x.moveTo(0,220);<br/>　　　　　　　　　　x.lineTo(0,230);<br/>　　　　　　　　　　x.stroke();<br/>　　　　　　　　　　x.closePath();<br/>　　　　　　　　　　x.restore(); //返回环境变量<br/>　　　　　　　　}</p><p>　　　　　　　　//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字<br/>　　　　　　　　for(var a=0;a<12;a++){<br/>　　　　　　　　　　x.save();<br/>　　　　　　　　　　x.beginPath();<br/>　　　　　　　　　　x.lineWidth=4;<br/>　　　　　　　　　　x.translate(250,250);<br/>　　　　　　　　　　x.rotate(a*30*Math.PI/180);<br/>　　　　　　　　　　x.moveTo(0,215);<br/>　　　　　　　　　　x.lineTo(0,230);<br/>　　　　　　　　　　x.stroke();<br/>　　　　　　　　　　x.closePath();<br/>　　　　　　　　　　x.restore();<br/>　　　　　　　　}</p><p> </p><p>　　　　　　　　//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到小数点后</p><p>　　　　　　　　var time=new Date();<br/> 　　　　　　　　var seconds=time.getSeconds();<br/> 　　　　　　　　var minutes=time.getMinutes()+seconds/60;<br/> 　　　　　　　　var hours=time.getHours()+minutes/60;</p><p>　　　　　　　　//当大于12的时候也就是要进入13点了 也就是1点 所以要减去12<br/> 　　　　　　　　if(hours>12){<br>            　　　　　　　　　　hours=hours-12<br>        　　　　　　　　};</p> <p>　　　　　　　　//表盘上显示本地时间，如2017/06/14 下午 20：23</p> <p>　　　　　　　　x.beginPath()<br>        　　　　　　　　x.font="20px 黑体"<br>        　　　　　　　　x.strokeText(time.toLocaleString(),150,200)<br>        　　　　　　　　x.closePath();</p> <p>　　　　　　　　//时<br>        　　　　　　　　x.save();<br>        　　　　　　　　x.translate(250,250)<br>        　　　　　　　　x.lineWidth=4;<br>        　　　　　　　　x.beginPath();<br>        　　　　　　　　x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。<br>        　　　　　　　　x.moveTo(0,10);<br>        　　　　　　　　x.lineTo(0,-180);<br>        　　　　　　　　x.stroke();<br>        　　　　　　　　x.closePath();<br>        　　　　　　　　x.restore();</p> <p>　　　　　　　　//分<br>        　　　　　　　　x.save();<br>        　　　　　　　　x.beginPath();<br>        　　　　　　　　x.translate(250,250)<br>        　　　　　　　　x.lineWidth=3;<br>        　　　　　　　　x.rotate(minutes*6*Math.PI/180); //分针同理<br>        　　　　　　　　x.moveTo(0,10);<br>        　　　　　　　　x.lineTo(0,-200)<br>        　　　　　　　　x.stroke();<br>        　　　　　　　　x.closePath();<br>        　　　　　　　　x.restore();</p> <p>　　　　　　　　//秒<br>        　　　　　　　　x.save();<br>        　　　　　　　　x.beginPath();<br>        　　　　　　　　x.translate(250,250);<br>        　　　　　　　　x.lineWidth=2;<br>        　　　　　　　　x.rotate(seconds*6*Math.PI/180);//秒针也一样<br>        　　　　　　　　x.moveTo(0,10);<br>        　　　　　　　　x.lineTo(0,-210);<br>        　　　　　　　　x.stroke();<br>        　　　　　　　　x.closePath();<br>        　　　　　　　　x.restore();</p> <p>　　　　　　　　//秒针上的小圆点</p> <p>　　　　　　　　x.save();<br>        　　　　　　　　x.beginPath();<br>        　　　　　　　　x.translate(250,250);<br>        　　　　　　　　x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同<br>        　　　　　　　　x.fillStyle="blue";<br>        　　　　　　　　x.arc(0,-170,4,0,Math.PI*360/180);<br>        　　　　　　　　x.fill();<br>        　　　　　　　　x.closePath();<br>        　　　　　　　　x.restore();</p> <p>                       //中心蓝色小圆点</p> <p>　　　　　　　　x.beginPath();<br>        　　　　　　　　x.fillStyle="blue"<br>        　　　　　　　　x.arc(250,250,6,0,Math.PI*360/180);<br>        　　　　　　　　x.fill();<br>        　　　　　　　　x.closePath();</p> <p>　　　　　　　　//中心红色小圆点</p> <p>　　　　　　　　x.beginPath();<br>        　　　　　　　　x.fillStyle="red"<br>        　　　　　　　　x.arc(250,250,3,0,Math.PI*360/180);<br>        　　　　　　　　x.fill();<br>        　　　　　　　　x.closePath();</p> <p>　　　　　　}<br>    　　　　　　setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。<br>　　</script>

 效果

 

　

Atas ialah kandungan terperinci canvas中画布时钟的简单事例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!