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.stroke();

//=====================  刻度     =========================

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

if(i%5==0){

cxt.save();//储存之前的绘画环境

cxt.translate(400,400)//将中心点移动至画布的中心点

cxt.rotate(i*6*Math.PI/180);//旋转绘画  角度i*60 度

cxt.beginPath();//重置绘画环境

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

cxt.lineWidth=8;//设置绘画线宽

cxt.moveTo(0,-192)//设定线的起始点

cxt.lineTo(0,-170)//设定线的结束

cxt.closePath();//回到起点

cxt.stroke();//绘制

cxt.restore();//提取指定点储存的绘画环境

}else{

cxt.save();//储存之前的绘画环境

cxt.translate(400,400)//将中心点移动至画布的中心点

cxt.rotate(i*6*Math.PI/180);//旋转绘画  角度i*60 度

cxt.beginPath();//重置绘画环境

cxt.strokeStyle="darkorange";//设定绘画颜色

cxt.lineWidth=5;//设置绘画线宽

cxt.moveTo(0,-192)//设定线的起始点

cxt.lineTo(0,-180)//设定线的结束

cxt.closePath();//

cxt.stroke();//绘制

cxt.restore();//提取指定点储存的绘画环境

}

}

for(var i=1;i<13;i++){//循环写入数字

cxt.save();//储存之前的绘画环境

cxt.translate(400,400);//吧0.0点移到表盘中心

cxt.beginPath();//创建新的绘画环境

cxt.font="24px 微软雅黑";

switch(i){//盘点语句

case 1://当i为1时

cxt.fillText(i,66,-116);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 2://当i为1时

cxt.fillText(i,116,-62);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 3://当i为1时

cxt.fillText(i,140,10);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 4://当i为1时

cxt.fillText(i,110,82);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 5://当i为1时

cxt.fillText(i,64,130);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 6://当i为1时

cxt.fillText(i,-6,150);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 7://当i为1时

cxt.fillText(i,-78,130);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 8://当i为1时

cxt.fillText(i,-130,82);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 9://当i为1时

cxt.fillText(i,-150,10);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 10://当i为1时

cxt.fillText(i,-130,-62);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 11://当i为1时

cxt.fillText(i,-80,-114);//填充一个文本，内容为i当前的值  后面的是位置

break;

case 12://当i为1时

cxt.fillText(i,-12,-134);//填充一个文本，内容为i当前的值  后面的是位置

break;

}

cxt.closePath();

cxt.fill();

cxt.restore();//旋转

}

//=============  圆心的边距   ================

cxt.strokeStyle="aqua";//

cxt.beginPath();

cxt.lineWidth=3;

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

cxt.closePath();

cxt.stroke();

//==============  圆心的颜色  ===============

cxt.fillStyle="#d10606";

cxt.beginPath();

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

cxt.closePath();

cxt.fill();

//==========  秒针       =======================

cxt.beginPath();

cxt.save();

cxt.strokeStyle="aqua";

cxt.translate(400,400);

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

cxt.fillStyle="aqua";

cxt.beginPath();

cxt.moveTo(0,0);

cxt.lineTo(0,-150);

cxt.fill();

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-80);

cxt.quadraticCurveTo(10,-105,-10,-130);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-80);

cxt.quadraticCurveTo(30,-105,-10,-130);

cxt.stroke();

cxt.fill();

cxt.restore();

//===============  分针     ================

cxt.beginPath();

cxt.save();

cxt.strokeStyle="red";

cxt.translate(400,400);

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

cxt.fillStyle="red";

cxt.beginPath();

cxt.moveTo(0,0);

cxt.lineTo(0,-130);

cxt.fill();

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-60);

cxt.quadraticCurveTo(10,-85,-10,-110);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-60);

cxt.quadraticCurveTo(30,-85,-10,-110);

cxt.stroke();

cxt.fill();

cxt.restore();

//============  时针   ==================

cxt.beginPath();

cxt.save();

cxt.strokeStyle="darkred";

cxt.translate(400,400);

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

cxt.fillStyle="darkred";

cxt.beginPath();

cxt.moveTo(0,0);

cxt.lineTo(0,-100);

cxt.fill();

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-30);

cxt.quadraticCurveTo(10,-55,-10,-80);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(-10,-30);

cxt.quadraticCurveTo(30,-55,-10,-80);

cxt.stroke();

cxt.fill();

cxt.restore();

//=============  边框    ===================

cxt.save();

cxt.strokeStyle="red";

cxt.beginPath();

cxt.moveTo(400,191);

cxt.bezierCurveTo(500,170,300,130,400,100);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(380,608);

cxt.lineTo(380,624);

cxt.lineTo(420,624);

cxt.lineTo(420,608);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(384,624);

cxt.bezierCurveTo(aa,645,ab,685,ac,700);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(394,624);

cxt.bezierCurveTo(ca,645,cb,685,cc,700);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(404,624);

cxt.bezierCurveTo(da,645,db,685,dc,700);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(414,624);

cxt.bezierCurveTo(ea,645,eb,685,ec,700);

cxt.stroke();

cxt.beginPath();

cxt.moveTo(420,624);

cxt.bezierCurveTo(fa,645,fb,685,fc,700);

cxt.stroke();

//第一根线============

aa+=za;

if(aa>=440){

za=-2;

}else if(aa<=340){

za=2;

}

ab+=zb;

if(ab>=440){

zb=-2;

}else if(ab<=340){

zb=2;

}

ac+=zc;

if(ac>=440){

zc=-2;

}else if(ac<=340){

zc=2;

}

//第二根线====

ca+=ya;

if(ca>=450){

ya=-2;

}else if(ca<=350){

ya=2;

}

cb+=yb;

if(cb>=450){

yb=-2;

}else if(cb<=350){

yb=2;

}

cc+=yc;

if(cc>=450){

yc=-2;

}else if(cc<=350){

yc=2;

}

//第三根线======

da+=xa;

if(da>=460){

xa=-2;

}else if(da<=360){

xa=2;

}

db+=xb;

if(db>=460){

xb=-2;

}else if(db<=360){

xb=2;

}

dc+=xc;

if(dc>=460){

xc=-2;

}else if(dc<=360){

xc=2;

}

//第四根线======

ea+=ta;

if(ea>=470){

ta=-2;

}else if(ea<=370){

ta=2;

}

eb+=tb;

if(eb>=470){

tb=-2;

}else if(eb<=370){

tb=2;

}

ec+=tc;

if(ec>=470){

tc=-2;

}else if(ec<=370){

tc=2;

}

//第五根线======

fa+=sa;

if(fa>=480){

sa=-2;

}else if(fa<=380){

sa=2;

}

fb+=sb;

if(fb>=480){

sb=-2;

}else if(fb<=380){

sb=2;

}

fc+=sc;

if(fc>=476){

sc=-2;

}else if(fc<=376){

sc=2;

}

}