复制代码
<!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 12
var 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;
//新开启作图路径，避免和之前画板上的内容产生干扰
