html酷炫电子时钟效果,Html5时钟特效代码

Html5时钟特效代码html>

时钟

canvas{display: block;margin: 0 auto;}

抱歉，您的浏览器不支持canvas画布

var myCanvas=document.getElementById("myCanvas");//获取画布

var cxt=myCanvas.getContext("2d");//给画布创建2d显示环境

show();

//第一根线

var aa=350;

var za=2;

var ab=450;

var zb=2;

var ac=380;

var zc=2;

//第二根线

var ca=360;

var ya=2;

var cb=460;

var yb=2;

var cc=390;

var yc=2;

//第三根线

var da=370;

var xa=2;

var db=470;

var xb=2;

var dc=400;

var xc=2;

//第四根线

var ea=380;

var ta=2;

var eb=480;

var tb=2;

var ec=410;

var tc=2;

//第五根线

var fa=390;

var sa=2;

var fb=490;

var sb=5;

var fc=416;

var sc=2;

setInterval(show,100);//定时器每秒执行一次目的是让秒针同步

function show(){

var now=new Date();//获取当地时间

var hour=now.getHours();//获取当前时间的小时数

var min=now.getMinutes();//获取当前时间的分钟数

var sec=now.getSeconds();//获取当地时间的秒数

hour+=parseFloat(min/60);//

hour=hour>12?hour-12:hour;//将24小时转化为12小时制

cxt.clearRect(0,0,800,800);//清除画布

//================  绘制表盘   ===================

cxt.strokeStyle="red";//设定绘制的颜色

cxt.fillStyle="#650665";//设定填充的颜色

cxt.beginPath();

cxt.lineWidth=20;//设定绘制的线宽

cxt.shadowColor="#f546cd";//设定阴影的颜色

cxt.shadowBlur=20;//设定阴影的模糊度

cxt.arc(400,400,200,0,2*Math.PI);//设置圆心点，元的半径为200，起始点为0度，结束点为360度

cxt.stroke();//绘制上面的圆

cxt.beginPath();

cxt.strokeStyle="yellow";

cxt.lineWidth=5;

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

cxt.strok