html画表盘 随时间转动,canvas绘制表盘时钟

canvas绘制表盘

您的浏览器不支持canvas

var box = document.getElementById('box');

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

// 时钟动起来

var timer = null;

function clock(){

var date = new Date();

var h = date.getHours();

h = h + h/60;

h = h>12? h-12:h;

var m = date.getMinutes();

var s = date.getSeconds();

// 清画布

cxt.clearRect(0,0,500,500);

// 画表盘

cxt.strokeStyle = '#f0f';

cxt.lineWidth = 6;

cxt.beginPath();

cxt.arc(250,250,100,0,2*Math.PI);

cxt.stroke();

// 画时钟刻度

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

cxt.save();

cxt.translate(250,250);

cxt.rotate(30*i*Math.PI/180);

cxt.lineWidth = 3;

cxt.beginPath();

cxt.moveTo(0,-80);

cxt.lineTo(0,-92);

cxt.stroke();

cxt.restore();

}

//画分钟刻度

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

cxt.save();

cxt.translate(250,250);

cxt.rotate(6*i*Math.PI/180);

cxt.lineWidth = 2;

cxt.beginPath();

cxt.moveTo(0,-86);

cxt.lineTo(0,-92);

cxt.stroke();

cxt.restore();

}

// 画时针

cxt.save();

cxt.lineWidth = 5;

cxt.translate(250,250);

cxt.rotate(h*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,6);

cxt.lineTo(0,-40);

cxt.stroke();

cxt.restore();

// 画分针

cxt.save();

cxt.lineWidth = 3;

cxt.translate(250,250);

cxt.rotate(m*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,8);

cxt.lineTo(0,-60);

cxt.stroke();

cxt.restore();

// 画秒针

cxt.save();

cxt.lineWidth = 1;

cxt.translate(250,250);

cxt.rotate(s*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,10);

cxt.lineTo(0,-75);

cxt.stroke();

cxt.restore();

// 画中心的小圆固定三根针

cxt.save();

cxt.beginPath();

cxt.fillStyle = '#0f0';

cxt.lineWidth = 2;

cxt.translate(250,250);

cxt.arc(0,0,2,0,360,false);

cxt.stroke();

cxt.fill();

cxt.restore();

// 画秒针上的园

cxt.save();

cxt.fillStyle = '#f00';

cxt.lineWidth = 2;

cxt.translate(250,250);

cxt.rotate(s*6*Math.PI/180);

cxt.beginPath();

cxt.arc(0,-60,2,0,360,false);

cxt.stroke();

cxt.fill();

cxt.restore();

}

clock();

timer = setInterval(clock,1000);