您的位置：首页 > Web前端 > JavaScript

javascript练习 canvas时钟

2017-03-14 11:33 190 查看
摘要: 学习《javascript高级程序设计》时接触到了canvas元素，示例是画一个静态的表盘，不满足于此的我尝试让它动起来。

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

<body>
<canvas id="biaopan" width="200" height="200" style="position:absolute; left:0px; top:0px;">表盘</canvas>
<canvas id="miaozhen" width="200" height="200" style="position:absolute; left:0px; top:0px;">秒针</canvas>
<canvas id="fenzhen" width="200" height="200" style="position:absolute; left:0px; top:0px;">分针</canvas>
<canvas id="shizhen" width="200" height="200" style="position:absolute; left:0px; top:0px;">时针</canvas>
<script>

var biaopan = document.getElementById("biaopan");
var miaozhen = document.getElementById("miaozhen");
var fenzhen = document.getElementById("fenzhen");
var shizhen = document.getElementById("shizhen");

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

//绘制表盘
function biaoPan(){

var contextB = biaopan.getContext("2d");

//开始路径
contextB.beginPath();

//变换原点
contextB.translate(100,100);

//绘制外圆
contextB.arc(0,0,99,0,2*Math.PI,false);

//绘制内圆
contextB.moveTo(94,0);
contextB.arc(0,0,94,0,2*Math.PI,false);

//绘制中心
contextB.moveTo(1,0);
contextB.arc(0,0,1,0,2*Math.PI,false);
contextB.moveTo(2,0);
contextB.arc(0,0,2,0,2*Math.PI,false);
contextB.moveTo(3,0);
contextB.arc(0,0,3,0,2*Math.PI,false);
contextB.moveTo(4,0);
contextB.arc(0,0,4,0,2*Math.PI,false);
contextB.moveTo(5,0);
contextB.arc(0,0,5,0,2*Math.PI,false);

//绘制数字
contextB.font = "bold 12px Arial";
contextB.textAlign = "center";
contextB.textBaseline = "middle";
for(var i=1; i<=12; i++){
contextB.fillText(i, x(i*30)*80, y(i*30)*80);
}

//绘制刻度
for(var i=1; i<=60; i++){
//数字地方不用画刻度
if(i%5 != 0){
contextB.moveTo(x(i*6)*79, y(i*6)*79);
contextB.lineTo(x(i*6)*81, y(i*6)*81);
}
}

//描边路径
contextB.stroke();
}

//根据当前时间计算初始角度
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;

//绘制秒针
var contextM = miaozhen.getContext("2d");

//变换原点
contextM.translate(100,100);

//初始位置
contextM.rotate(rm);

function miaoZhen(){

//设定叠加方法
contextM.globalCompositeOperation = "copy";

//开始路径
contextM.beginPath();

contextM.moveTo(0,0);
contextM.lineTo(0,-87);
contextM.lineTo(-1,-87);
contextM.lineTo(0,-92);
contextM.lineTo(1,-87);
contextM.lineTo(0,-87);
contextM.lineTo(0,10);
contextM.lineTo(-3,10);
contextM.lineTo(3,10);

//旋转度数
contextM.rotate(Math.PI/30);

//描边路径
contextM.stroke();
}

//绘制分针
var contextF = fenzhen.getContext("2d");

//变换原点
contextF.translate(100,100);

//初始位置
contextF.rotate(rf);

function fenZhen(){

//设定叠加方法
contextF.globalCompositeOperation = "copy";

//开始路径
contextF.beginPath();

contextF.moveTo(0,0);
contextF.lineTo(0,-67);
contextF.lineTo(-1,-67);
contextF.lineTo(0,-72);
contextF.lineTo(1,-67);
contextF.lineTo(0,-67);
contextF.lineTo(0,10);
contextF.lineTo(-3,10);
contextF.lineTo(3,10);

//旋转度数
contextF.rotate(Math.PI/1800);

//描边路径
contextF.stroke();
}

//绘制时针
var contextS = shizhen.getContext("2d");

//变换原点
contextS.translate(100,100);

//初始位置
contextS.rotate(rs);

function shiZhen(){

//设定叠加方法
contextS.globalCompositeOperation = "copy";

//开始路径
contextS.beginPath();

contextS.moveTo(0,0);
contextS.lineTo(0,-45);
contextS.lineTo(-1,-45);
contextS.lineTo(0,-50);
contextS.lineTo(1,-45);
contextS.lineTo(0,-45);
contextS.lineTo(0,10);
contextS.lineTo(-3,10);
contextS.lineTo(3,10);

//旋转度数
contextS.rotate(Math.PI/21600);

//描边路径
contextS.stroke();
}

biaoPan();miaoZhen();fenZhen();shiZhen();
setInterval("miaoZhen(),fenZhen(),shiZhen()",1000);

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript canvas 时钟
相关文章推荐
新的分享
章节导航