<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML CLOCK</title></head><body><canvas width="500" height="500" id="clock">你的浏览器不支持canvas标签，时针显示不出来哦！</canvas><script type="text/javascript">//画布背景颜色var clockBackGroundColor = "#ABCDEF";//时针颜色var hourPointColor = "#000";//时针粗细var hourPointWidth = 7;//时针长度var hourPointLength = 100;//分针颜色var minPointColor = "#000";//分针粗细var minPointWidth = 5;//分针长度var minPointLength = 150;//秒针颜色var secPointColor = "#F00";//秒针粗细var secPointWidth = 3;//秒针长度var secPointLength = 170;//表盘颜色var clockPanelColor = "#ABCDEF";//表盘刻度颜色var scaleColor = "#000";//表盘大刻度宽度 3 6 9 12var scaleBigWidth = 9;//表盘大刻度的长度var scaleBigLength = 15;//表盘小刻度的宽度var scaleSmallWidth = 5;//表盘小刻度的长度var scaleSmallLength = 10;//圆心颜色var centerColor = 'red';//时钟画布var clock = document.getElementById('clock');clock.style.background = clockBackGroundColor;//时针画布的作图环境（画板）var panel = clock.getContext('2d');//画线/***画线段***/function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){//保存传入的画板，相当于每次作画新开一个图层p.save();//设置画笔宽度p.lineWidth = width;//设置画笔颜色p.strokeStyle = color;//新开启作图路径，避免和之前画板上的内容产生干扰p.beginPath();p.translate(cX,cY);//旋转p.rotate(ran);//移动画笔到开始位置p.moveTo(startX,startY);//移动画笔到结束位置p.lineTo(endX,endY);//画线操作p.stroke();//关闭作图路径，避免和之后在画板上绘制的内容产生干扰p.closePath();//在传入的画板对象上覆盖图层p.restore();}/***画水平线*/function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);} /***画圈圈*/function drowCircle(p,width,color,centreX,centreY,r){p.save();//设置画笔宽度p.lineWidth = width;//设置画笔颜色p.strokeStyle = color;//新开启作图路径，避免和之前画板上的内容产生干扰p.beginPath();//画圈圈p.arc(centreX,centreY,r,0,360,false);//画线操作p.stroke();//关闭作图路径，避免和之后在画板上绘制的内容产生干扰p.closePath();//在传入的画板对象上覆盖图层p.restore();}function drowPoint(p,width,color,centreX,centreY,r){p.save();//设置画笔宽度p.lineWidth = width;//设置画笔颜色p.fillStyle = color;//新开启作图路径，避免和之前画板上的内容产生干扰p.beginPath();//画圈圈p.arc(centreX,centreY,r,0,360,false);//画线操作p.fill();//关闭作图路径，避免和之后在画板上绘制的内容产生干扰p.closePath();//在传入的画板对象上覆盖图层p.restore();}function drowScales(p){//画小刻度for(var i = 0;i < 60;i++){drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);}//画大刻度for(var i = 0;i < 12;i++){drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);//可以添加数字刻度}}function drowHourPoint(p,hour){drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);}function drowMinPoint(p,min){drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);}function drowSecPoint(p,sec){drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);}function drowClock(){panel.clearRect(0,0,500,500);panel.fillText("",10,20);panel.fillText("<a href="https://zhishitu.com/ke" date = new Date();var sec = date.getSeconds();var min = date.getMinutes();var hour = date.getHours() + min/60;drowCircle(panel,7,'blue',250,250,200);drowScales(panel);drowHourPoint(panel,hour);drowMinPoint(panel,min);drowSecPoint(panel,sec);drowPoint(panel,1,centerColor,250,250,7);//drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);}//drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);drowClock();setInterval(drowClock,1000);function save(){var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream"); location.href="https://zhishitu.com/ke">【相关推荐】
1. HTML5开发手机应用-详细介绍viewport的作用（图文）
3. HTML5 程序设计
html5 canvas实现圆形时钟实例代码-H5教程
- 说明
- 作者： King
- 分类：计算机
代码如下: