html 指针图表,HTML5 canvas 指针时钟

您的浏览器不支持canvas标签，无法看到时钟

var clock=document.getElementById('clock');var cxt=clock.getContext('2d');

function drawClock(){

cxt.clearRect(0,0,500,500); //清除画布区域

var now =newDate();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);