您的位置：首页 > 其它

canvas时钟

2015-07-09 00:00 176 查看

摘要: 利用save()和restore()改进了一下，虽然还是没彻底弄清他俩的具体运行过程

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas时钟</title>
</head>

<body>
<canvas id="drawing" width="200" height="200" style="position:absolute; left:0px; top:0px;"></canvas>
<script>

var XD = document.getElementById("drawing").getContext("2d");

function clock(){

function x(a){
return Math.sin(2*Math.PI/360*a)
}
function y(a){
return -Math.cos(2*Math.PI/360*a)
}

XD.save();
//-----表盘-----
XD.beginPath();//开始路径
XD.globalCompositeOperation = "copy";//设定叠加方法
XD.translate(100,100);//变换原点
//-----绘制中心-----
XD.lineWidth = 5;
XD.moveTo(2,0);
XD.arc(0,0,2,0,2*Math.PI,false);
XD.stroke();
XD.restore();

XD.save();
XD.translate(100,100);//变换原点
//-----绘制外圆-----
XD.moveTo(99,0);
XD.arc(0,0,99,0,2*Math.PI,false);
//-----绘制内圆-----
XD.moveTo(94,0);
XD.arc(0,0,94,0,2*Math.PI,false);
//-----绘制数字-----
XD.font = "bold 12px Arial";
XD.textAlign = "center";
XD.textBaseline = "middle";
for(var i=1; i<=12; i++){
XD.fillText(i, x(i*30)*80, y(i*30)*80);
}
//-----绘制刻度-----
for(var i=1; i<=60; i++){
if(i%5 != 0){
XD.moveTo(x(i*6)*79, y(i*6)*79);
XD.lineTo(x(i*6)*81, y(i*6)*81);
}
}
XD.stroke();//描边路径
XD.restore();

//-----根据当前时间计算初始角度-----
var mm = new Date();
var ms = mm.getHours()*3600+mm.getMinutes()*60+mm.getSeconds();
var yidu = Math.PI/180;
var rm = yidu * ms * 6;
var rf = yidu * ms/60 * 6;
var rs = yidu * ms/3600 * 30;

XD.save();
//-----时针-----
XD.translate(100,100);//变换原点
XD.rotate(rs);//初始位置
XD.beginPath();//开始路径
//-----绘制-----
XD.moveTo(0,0);
XD.lineTo(0,-45);
XD.lineTo(-1,-45);
XD.lineTo(0,-50);
XD.lineTo(1,-45);
XD.lineTo(0,-45);
XD.lineTo(0,10);
XD.lineTo(-3,10);
XD.lineTo(3,10);
//-----旋转-----
XD.rotate(Math.PI/21600);
XD.stroke();//描边路径
XD.restore();

XD.save();
//-----分针-----
XD.translate(100,100);//变换原点
XD.rotate(rf);//初始位置
XD.beginPath();//开始路径
//-----绘制-----
XD.moveTo(0,0);
XD.lineTo(0,-67);
XD.lineTo(-1,-67);
XD.lineTo(0,-72);
XD.lineTo(1,-67);
XD.lineTo(0,-67);
XD.lineTo(0,10);
XD.lineTo(-3,10);
XD.lineTo(3,10);
//-----旋转-----
XD.rotate(Math.PI/1800);
XD.stroke();//描边路径
XD.restore();

XD.save();
//-----秒针-----
XD.strokeStyle="red";
XD.translate(100,100);//变换原点
XD.rotate(rm);//初始位置
XD.beginPath();//开始路径
//-----绘制表针-----
XD.moveTo(0,0);
XD.lineTo(0,-87);
XD.lineTo(0,10);
XD.lineTo(-3,10);
XD.lineTo(3,10);
//-----绘制中心-----
XD.moveTo(1,0);
XD.arc(0,0,1,0,2*Math.PI,false);
XD.moveTo(2,0);
XD.arc(0,0,2,0,2*Math.PI,false);
//-----旋转-----
XD.rotate(Math.PI/30);
XD.stroke();//描边路径
XD.restore();
}

clock();
setInterval("clock()",1000);

</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航