html画表盘 随时间转动,HTML5 canvas圆形时钟指针平缓转动随机切换表盘颜色

特效描述：HTML5 canvas圆形时钟 指针平缓转动 随机切换表盘颜色。使用HTML5制作的时钟，时针分针秒针平滑转动而不是蹦着走，每次进入网页或单机表盘会随即切换表盘边框的颜色。

代码结构

1. HTML代码

您的浏览器不支持canvas标签!

var clock=document.getElementById("clock");

var cxt=clock.getContext("2d");

var colr=(200+Math.floor(Math.random()*55.99));

var colg=(200+Math.floor(Math.random()*55.99));

var colb=(200+Math.floor(Math.random()*55.99));

function resetcolor(){

colr=(200+Math.floor(Math.random()*55.99));

colg=(200+Math.floor(Math.random()*55.99));

colb=(200+Math.floor(Math.random()*55.99));

}

function drawClock(){

//获取时间

var now=new Date();

var hou=now.getHours();

var min=now.getMinutes();

var sec=now.getSeconds();

var mec=now.getMilliseconds();

//转换12小时进制

hou=hou>12?hou-12:hou;

//清空画布

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

//阴影

cxt.fill();

cxt.fillStyle="gray";

cxt.beginPath();

cxt.arc(270,260,205,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

//表盘

cxt.fill();

cxt.fillStyle="white";

cxt.beginPath();

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

cxt.closePath();

cxt.fill();

//蓝色表盘(边框)

cxt.strokeStyle="#dddddd"

cxt.lineWidth=10;

cxt.beginPath();

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

cxt.closePath();

cxt.stroke();

cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);

cxt.lineWidth=10;

cxt.beginPath();

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

cxt.closePath();

cxt.stroke();

cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);

cxt.lineWidth=3;

cxt.beginPath();

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

cxt.closePath();

cxt.stroke();

cxt.strokeStyle="#"+(colr-100).toString(16)+(colg-100).toString(16)+(colb-100).toString(16);

cxt.lineWidth=5;

cxt.beginPath();

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

cxt.closePath();

cxt.stroke();

//刻度(时分)

//时刻度

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

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="black";

//设置原点

cxt.translate(250,250);

//设置旋转角度;

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

cxt.beginPath();

cxt.moveTo(0,180);

cxt.lineTo(0,160);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分刻度

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

if(i%5!=0){

cxt.save();

cxt.lineWidth=2;

cxt.strokeStyle="black";

//设置原点

cxt.translate(250,250);

//设置旋转角度;

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

cxt.beginPath();

cxt.moveTo(0,175);

cxt.lineTo(0,165);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

}

//指针(时分秒)

//时针

cxt.save();

cxt.lineWidth=12;

cxt.strokeStyle="black";

cxt.beginPath();

cxt.translate(250,250);

cxt.rotate((hou*30+min*0.5+180)/180*Math.PI);

cxt.moveTo(0,0);

cxt.lineTo(0,90);

cxt.closePath();

cxt.stroke()

cxt.restore();

//分针

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="black";

cxt.beginPath();

cxt.translate(250,250);

cxt.rotate((min*6+sec*0.1+180)/180*Math.PI);

cxt.moveTo(0,0);

cxt.lineTo(0,130);

cxt.closePath();

cxt.stroke()

cxt.restore();

//秒针

cxt.save();

cxt.lineWidth=2;

cxt.strokeStyle="red";

cxt.beginPath();

cxt.translate(250,250);

cxt.rotate((sec*6+mec*0.006+180)/180*Math.PI);

cxt.moveTo(0,0);

cxt.lineTo(0,150);

cxt.closePath();

cxt.stroke();

cxt.fillStyle="red";

cxt.beginPath();

cxt.arc(0,148,4,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

cxt.fillStyle="white";

cxt.beginPath();

cxt.arc(0,148,2,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

cxt.restore();

//秒针装饰

cxt.fillStyle="red";

cxt.beginPath();

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

cxt.closePath();

cxt.fill();

cxt.fillStyle="black";

cxt.beginPath();

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

cxt.closePath();

cxt.fill();

cxt.fillStyle="white";

cxt.beginPath();

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

cxt.closePath();

cxt.fill();

}

drawClock();

//使用setInterval(代码,周期(毫秒制))让时钟动起来

setInterval(drawClock,10);