您的位置：首页 > 其它

canvas绘制时钟

2014-03-16 14:32 417 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>时钟</title>

</head>

<body>

<canvas id="canvas" width="600px" height="600px" style="border:1px dashed green"></canvas>

</body>

<script>

var cnavas=document.getElementById('canvas');

var cxt=canvas.getContext('2d');

function clock(){

//清空画布

cxt.clearRect(0,0,canvas.width,canvas.height);

//获得当前时间

var date=new Date();

var hour = date.getHours();

var minute = date.getMinutes();

var second = date.getSeconds();

hour=hour>12?hour-12:hour;

//绘制表盘

cxt.beginPath();//开启新路径

cxt.arc(300,200,150,Math.PI*2,0,true);

cxt.lineWidth=10; //行宽

cxt.strokeStyle='red';//描绘样式

cxt.stroke();//画笔

cxt.closePath();//关闭新路径

//时针刻度

for(var i=0;i<12;i++){

cxt.save();//保存当前的图层(方便将来裁剪、缩放、旋转等)

cxt.beginPath();

cxt.translate(300,200);//设置原点（0,0）

cxt.rotate(Math.PI*2/12*i);//旋转

cxt.moveTo(0,-145);//起始点

cxt.lineTo(0,-130);//结束点

cxt.strokeStyle='#000';

cxt.lineWidth=8;

cxt.stroke();

cxt.closePath();

cxt.restore();//将原来的图层恢复，将当前的图层保存进去

}

//分针刻度

for(var i=0;i<60;i++){

cxt.save();

cxt.beginPath();

cxt.translate(300,200);//设置原点（0,0）

cxt.rotate(Math.PI*2/60*i);//旋转

cxt.moveTo(0,-145);

cxt.lineTo(0,-135);

cxt.strokeStyle='#ccc';

cxt.lineWidth=6;

cxt.stroke();

cxt.closePath();

cxt.restore();

}

//时针

cxt.save();

cxt.beginPath();

cxt.translate(300,200);

cxt.rotate(Math.PI*2/12*hour);//旋转

cxt.moveTo(0,0);

cxt.lineTo(0,-100);

cxt.strokeStyle='#000';

cxt.lineWidth=8;

cxt.stroke();

cxt.closePath();

cxt.restore();

//分针

cxt.save();

cxt.beginPath();

cxt.translate(300,200);

cxt.rotate(Math.PI*2/60*minute);//旋转

cxt.moveTo(0,0);

cxt.lineTo(0,-110);

cxt.strokeStyle='blue';

cxt.lineWidth=6;

cxt.stroke();

cxt.closePath();

cxt.restore();

//秒针

cxt.save();

cxt.beginPath();

cxt.translate(300,200);

cxt.rotate(Math.PI*2/60*second);//旋转

cxt.moveTo(0,0);

cxt.lineTo(0,-120);

cxt.strokeStyle='red';

cxt.lineWidth=4;

cxt.stroke();

cxt.closePath();

cxt.restore();

//表柱

cxt.save();

cxt.translate(300,200);

cxt.arc(0,0,10,Math.PI*2,0,true);

cxt.fill();

cxt.restore();

}

clock();

setInterval(clock,1000);

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航