本文主要是介绍html5学习canvas实例之时钟，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<html><head><title>html5-01</title><meta http-equiv="content-type" content="text/html" charset="utf-8"><script language="javascript">window.οnlοad=function (){var canvas=document.getElementById("canvas");var ctx=canvas.getContext('2d');drawclock();setInterval(drawclock,1000);function drawclock(){//获取当前时间var mydate=new Date();var hour=mydate.getHours();var min=mydate.getMinutes();var sec=mydate.getSeconds();//清理ctx.clearRect(0,0,900,800);//表部分ctx.beginPath();ctx.strokeStyle="blue";ctx.lineWidth="20";ctx.arc(300,200,150,0,360,false);ctx.stroke();ctx.closePath();//画时针for(var i=0;i<12;i++){ctx.save();ctx.translate(300,200);ctx.rotate(i*30*Math.PI/180);ctx.lineWidth="7";ctx.strokeStyle="#000";ctx.beginPath();ctx.moveTo(0,-120);ctx.lineTo(0,-140);ctx.stroke();ctx.closePath();ctx.restore(); }//画秒针表盘for(var i=0;i<60;i++){ctx.save();ctx.translate(300,200);ctx.rotate(i*6*Math.PI/180);ctx.lineWidth="3";ctx.strokeStyle="#000";ctx.beginPath();ctx.moveTo(0,-130);ctx.lineTo(0,-140);ctx.stroke();ctx.closePath();ctx.restore(); } //画秒针ctx.save();ctx.translate(300,200);ctx.rotate(sec*6*Math.PI/180);ctx.strokeStyle="#666";ctx.lineWidth="3";ctx.beginPath();ctx.moveTo(0,10);ctx.lineTo(0,-110);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(0,-80,5,0,360,false);ctx.fill();ctx.closePath();ctx.restore();//画分针ctx.save();ctx.translate(300,200);ctx.rotate(min*6*Math.PI/180);ctx.strokeStyle="#666";ctx.lineWidth="3";ctx.beginPath();ctx.moveTo(0,10);ctx.lineTo(0,-80);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(0,-60,5,0,360,false);ctx.fill();ctx.closePath();ctx.restore();//画时针ctx.save();ctx.translate(300,200);ctx.rotate(hour*30*Math.PI/180);ctx.strokeStyle="#666";ctx.lineWidth="3";ctx.beginPath();ctx.moveTo(0,10);ctx.lineTo(0,-50);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(0,-30,5,0,360,false);ctx.fill();ctx.closePath();ctx.restore();ctx.beginPath();ctx.arc(300,200,5,0,360,false);ctx.fillStyle="#000";ctx.fill();ctx.closePath();}}</script></head><body><canvas id="canvas" width="900" height="800" >你的浏览器不支持canvas标签</canvas></body>
</html>这篇关于html5学习canvas实例之时钟的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
