首页 > 代码库 > html5 canvas简易时钟
html5 canvas简易时钟
<canvas id=‘clock‘ width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/javascript" charset="utf-8"> var clock=document.getElementById("clock"); var cxt=clock.getContext(‘2d‘); function drawClock () { //清除画布 cxt.clearRect(0,0,500,500); var now=new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour=now.getHours(); //时间格式 问题:将24小时制转化整12小时制 hour=hour>12?hour-12:hour; hour=hour+min/60; //表盘(蓝色) cxt.strokeStyle=‘blue‘; cxt.lineWidth=10; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.closePath(); cxt.stroke(); //刻度 //时刻度 for (var i=0;i<12;i++) { cxt.save(); cxt.lineWidth=7; cxt.strokeStyle=‘#000‘; //设置开始点 cxt.translate(250,250); //设置弧度 cxt.rotate(i*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //分刻度 for (var i=0;i<60;i++) { cxt.save(); cxt.strokeStyle=‘#000‘; cxt.lineWidth=5; cxt.translate(250,250); cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //时针 //设置时针分割 cxt.save(); cxt.lineWidth=7; cxt.strokeStyle=‘#000‘; cxt.translate(250,250); cxt.rotate(hour*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth=5; cxt.strokeStyle=‘#000‘; cxt.translate(250,250); cxt.rotate(min*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.lineWidth=3; cxt.strokeStyle=‘red‘; ///cxt.translate(250,250); cxt.translate(250,250); cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); //秒针修饰 cxt.beginPath(); cxt.arc(0,0,5,0,360,false); cxt.closePath(); //设置填充样式 cxt.fillStyle=‘gray‘; cxt.fill(); cxt.stroke(); //画另一个小圆 cxt.beginPath(); cxt.arc(0,-150,5,0,360,false); cxt.closePath(); //设置填充样式 cxt.fillStyle=‘gray‘; cxt.fill(); cxt.stroke(); cxt.restore(); } //使用定时器让表针动起来 drawClock(); setInterval(‘drawClock()‘,1000); </script>
html5 canvas简易时钟
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。