HTML5画时钟

来源：互联网发布：娇韵诗淘宝旗舰店编辑：程序博客网时间：2024/06/15 18:48
<!doctype html><html><head></head><body><canvas id="clock" width="600" height="600" >浏览器不支持canvas标签</canvas><script>//表盘,蓝色//刻度:12个时刻度,60个分刻度//指针:时针,分针,秒针(红色)//获取画布DOM(此时还不可以操作),一个页面中可能存在多个画布var clock = document.getElementById('clock');//设置绘图环境,新建一个2d绘图环境var cxt = clock.getContext('2d');function drawClock(){//每次清除画布cxt.clearRect(0,0,600,600);//获取时间对象,注意处理时间格式问题,12小时制var now = new Date();var hour = now.getHours();var hourText = hour;var minute = now.getMinutes();var second = now.getSeconds();//alert(hour+'点'+minute+'分'+second+'秒');//时针需获取浮点类型,加上对应的分钟数转化成的小时hour = hour + minute/60;//将24小时进制转换成12小时进制hour = hour>12?hour-12:hour;//画数字格式时间显示//在矩形中设置文字//画一个矩形,圈住空心字 它不属于路径cxt.beginPath();//重新设置画笔cxt.lineWidth=2;cxt.strokeStyle="#000000";cxt.rect(160,270,150,40);cxt.stroke();cxt.closePath();//实心//字体样式cxt.lineWidth=1;cxt.font="20px 黑体";//CSS Font属性,有顺序限制cxt.fillText(hourText+'点'+minute+'分'+second+'秒',200,200);//空心cxt.strokeText(hourText+'点'+minute+'分'+second+'秒',170,300);//表盘(蓝色)cxt.lineWidth = 10;cxt.strokeStyle = "BLUE";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 = "BLACK"//设置0,0点cxt.translate(250,250);//设置旋转角度:角度*Math.PI/180cxt.rotate(i*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-190);cxt.lineTo(0,-170);cxt.closePath();cxt.stroke();cxt.restore();}//分刻度for(var i = 0;i<60;i++){cxt.save();cxt.lineWidth = 4;cxt.strokeStyle = "BLACK"//设置0,0点cxt.translate(250,250);//设置旋转角度:角度*Math.PI/180cxt.rotate(i*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-190);cxt.lineTo(0,-180);cxt.closePath();cxt.stroke();cxt.restore();}//时针,默认指向3点cxt.save();cxt.lineWidth = 7;cxt.strokeStyle = "BLUE";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.stroke();cxt.restore();//分针,默认指向6点cxt.save();cxt.lineWidth = 4;cxt.strokeStyle = "BLACK";cxt.translate(250,250);cxt.rotate(minute*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-160);cxt.lineTo(0,10);cxt.closePath();cxt.stroke();cxt.restore();//秒针,默认指向10点-50秒(1秒对应6度)cxt.save();cxt.lineWidth = 1;cxt.strokeStyle = "RED";cxt.translate(250,250);cxt.rotate(second*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.fillStyle = "YELLOW";cxt.fill();//设置笔触样式cxt.strokeStyle = "RED";cxt.stroke();cxt.closePath();//画秒针前端小○点cxt.beginPath();cxt.arc(0,-160,5,0,360,false);//设置填充样式cxt.fillStyle = "RED";cxt.fill();//设置笔触样式cxt.strokeStyle = "YELLOW";cxt.stroke();cxt.closePath();cxt.restore();}//使用setInterval(代码,周期毫秒),让时钟动起来//为了避免刚开始时页面出现空白,先画一次drawClock();setInterval(drawClock,1000);</script></body></html>
0 0