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