| |
<!doctype html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>Canvas绘制时钟Demo</title> |
| |
<style> |
| |
#myCanvas{ |
| |
border: 1px solid; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<canvas id="myCanvas" width="500" height="400"> |
| |
很抱歉,你的浏览器不支持canvas元素 |
| |
</canvas> |
| |
<script> |
| |
var c = document.getElementById('myCanvas');//获取Canvas对象 |
| |
var ctx = c.getContext('2d');//获取上下文 |
| |
function drawClock() |
| |
{ |
| |
ctx.clearRect(0,0, c.width, c.height);//清除画布 |
| |
c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠 |
| |
var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径 |
| |
/*获取实际的时间*/ |
| |
var objTime = new Date(); |
| |
var objHour = objTime.getHours(); |
| |
var objMin = objTime.getMinutes(); |
| |
var objSen = objTime.getSeconds(); |
| |
/*将时间转换为具体的弧度*/ |
| |
/* |
| |
* 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向 |
| |
* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间 |
| |
* 分针和秒针是每次相隔6度 |
| |
*/ |
| |
var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180; |
| |
var arcMin = (-90+objMin*6)*Math.PI/180; |
| |
var arcSen = (-90+objSen*6)*Math.PI/180; |
| |
/*绘制圆盘*/ |
| |
ctx.beginPath(); |
| |
for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60 |
| |
{ |
| |
ctx.moveTo(x,y); |
| |
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); |
| |
} |
| |
ctx.closePath(); |
| |
ctx.stroke(); |
| |
/*绘制白盘盖住下面的线*/ |
| |
ctx.fillStyle = 'white'; |
| |
ctx.beginPath(); |
| |
ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19 |
| |
ctx.closePath(); |
| |
ctx.fill(); |
| |
/*依葫芦画瓢,制作每一个小时的线*/ |
| |
/*绘制圆盘*/ |
| |
ctx.beginPath(); |
| |
ctx.lineWidth = 3; |
| |
for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12 |
| |
{ |
| |
ctx.moveTo(x,y); |
| |
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); |
| |
} |
| |
ctx.closePath(); |
| |
ctx.stroke(); |
| |
/*绘制白盘盖住下面的线*/ |
| |
ctx.fillStyle = 'white'; |
| |
ctx.beginPath(); |
| |
ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18 |
| |
ctx.closePath(); |
| |
ctx.fill(); |
| |
/*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/ |
| |
/*开始绘制时针*/ |
| |
ctx.beginPath(); |
| |
ctx.moveTo(x,y); |
| |
ctx.lineWidth = 7; |
| |
ctx.lineCap = 'round'; |
| |
ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10 |
| |
ctx.stroke(); |
| |
ctx.closePath(); |
| |
/*开始绘制分针*/ |
| |
ctx.beginPath(); |
| |
ctx.moveTo(x,y); |
| |
ctx.lineWidth = 5; |
| |
ctx.lineCap = 'round'; |
| |
ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12 |
| |
ctx.stroke(); |
| |
ctx.closePath(); |
| |
/*开始绘制秒针*/ |
| |
ctx.beginPath(); |
| |
ctx.moveTo(x,y); |
| |
ctx.lineWidth = 2; |
| |
ctx.lineCap = 'round'; |
| |
ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16 |
| |
ctx.stroke(); |
| |
ctx.closePath(); |
| |
} |
| |
setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数 |
| |
</script> |
| |
</body> |
| |
</html> |
