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

HTML5 canvas 指针时钟

2016-11-15 20:03 323 查看 
<!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');

function drawClock(){
cxt.clearRect(0,0,500,500);    //清除画布区域
var now =new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();

hour=hour+min/60;    //小时必须获取浮点类型(小时+分数转化成的小时)
//问题 19:23:30
//将24小时进制转换为12小时
hour=hour>12?hour-12:hour;

cxt.lineWidth=10;
cxt.strokeStyle="#A61C3E";    //表盘(蓝色)
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*360,false);
cxt.closePath();
cxt.stroke();

//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=7;    //设置时针的粗细
cxt.strokeStyle="#005693";    //设置时针的颜色
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

//分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#04562E";
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

//时针
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="#04562E";
cxt.translate(250,250);//设置异次元空间的0，0点，画布的圆心
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120);        //针长
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();

//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();

//秒针
cxt.save();
cxt.strokeStyle="#611123";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);//设置旋转角度
cxt.beginPath();    //画图
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
cxt.beginPath();    //画出时针、分针、秒针的交叉点、
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
cxt.fillStyle="gray";    //设置填充样式
cxt.fill();
cxt.stroke();

//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
cxt.fillStyle="#FFF";
cxt.fill();
cxt.stroke();//设置笔触样式(秒针已设置)
cxt.restore();
}

drawClock();    //1000毫秒前要显示
//使用setInterval(代码,毫秒时间)  让时钟动起来
setInterval(drawClock,1000);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航