canvas教程

html5学习之canvas闹钟

字号+ 作者:H5之家 来源:H5之家 2015-10-28 18:55 我要评论( )

html5学习之canvas闹钟 点击预览:demo

html5学习之canvas闹钟 点击预览:demo

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas clock</title> <style> html,body{background-color:#000; margin:0; padding:0;color:#fff;} #canvas{ margin:100px 0;background-color:#fff;} </style> </head> <body> <center> <canvas id="canvas" width="500" height="500"> <span>你的浏览器out喇,看不到效果。</span> </canvas> </center> <script type="text/javascript"> var oc=document.getElementById("canvas"); var op=oc.getContext("2d"); function move(){ var x=250; var y=250; var mdate=new Date(); var h=mdate.getHours(); var m=mdate.getMinutes(); var s=mdate.getSeconds(); var hh=(-90+h*30+m/2)*Math.PI/180; var mm=(-90+m*6)*Math.PI/180; var ss=(-90+s*6)*Math.PI/180; op.clearRect(0,0,op.width,op.height); for(var i=0;i<=60;i++){ op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180); op.closePath(); op.stroke(); } //绘制遮挡圆 op.beginPath(); op.fillStyle="#fff"; op.moveTo(x,y); op.arc(x,y,145,0*Math.PI/180,360*Math.PI/180); op.closePath(); op.fill(); //绘制时针格子 for(var i=0;i<=12;i++){ op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180); op.closePath(); op.stroke(); } //绘制遮挡圆 op.beginPath(); op.fillStyle="#fff"; op.moveTo(x,y); op.arc(x,y,140,0*Math.PI/180,360*Math.PI/180); op.closePath(); op.fill(); //绘制秒针 op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,135,ss,ss,false); op.closePath(); op.stroke(); //绘制分针 op.lineWidth=2; op.beginPath(); op.moveTo(x,y); op.arc(x,y,100,mm,mm,false); op.closePath(); op.stroke(); //绘制时针 op.lineWidth=4; op.beginPath(); op.moveTo(x,y); op.arc(x,y,80,hh,hh,false); op.closePath(); op.stroke(); } setInterval(move,1000); move(); </script> </body> </html>

Related content:

Better Related Posts Plugin


本文固定链接: | 山猫的博客

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Android Canvas练习题(6)饼图(Pie Chart)百分比标注位置计算技巧

    Android Canvas练习题(6)饼图(Pie Chart)百分比标注位置计算技巧

    2017-04-12 11:00

  • HTML5 Canvas Spinner

    HTML5 Canvas Spinner

    2017-04-10 09:00

  • Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

    Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

    2017-04-04 17:01

  • Canvas Fingerprinting 指纹锁定技术

    Canvas Fingerprinting 指纹锁定技术

    2017-03-28 09:00

网友点评
n