html5怎么绘制时钟动画

本文小编为大家详细介绍“html5怎么绘制时钟动画”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么绘制时钟动画”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站公司2013年成立，是专业互联网技术服务公司，拥有项目网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元望花做网站,已为上家服务,为望花各地企业和个人服务,联系电话:028-86922220

复制代码

代码如下:

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

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

function drawNow(){

var now=new Date();

var hour=now.getHours();

var min=now.getMinutes();

var sec=now.getSeconds();

hour=hour>12?hour-12:hour;

hour=hour+min/60;

//表盘(蓝色)

cxt.lineWidth=10;

cxt.strokeStyle="blue"

cxt.beginPath();

cxt.arc(250,250,200,0,360,false);

cxt.closePath();

cxt.stroke();

//刻度

//时刻度

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

cxt.save();

cxt.lineWidth=7;

cxt.strokeStyle="black";

cxt.translate(250,250);

cxt.rotate(i*30*Math.PI/180);//旋转角度 角度*Math.PI/180=弧度

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分刻度

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

cxt.save();

//设置分刻度的粗细

cxt.lineWidth=5;

//重置画布原点

cxt.translate(250,250);

//设置旋转角度

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

//画分针刻度

cxt.strokeStyle="black";

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//时针

cxt.save();

// 设置时针风格

cxt.lineWidth=7;

cxt.strokeStyle="black";

cxt.translate(250,250);

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

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="black";

//设置异次元空间分针画布的中心

cxt.translate(250,250);

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

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.closePath();

cxt.stroke()

cxt.restore();

//秒针

cxt.save();

//设置秒针的风格

//颜色:红色

cxt.strokeStyle="red";

cxt.lineWidth=3;

//重置原点

cxt.translate(250,250);

//设置角度

//cxt.rotate(330*Math.PI/180);

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

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,20);

cxt.closePath();

cxt.stroke();

//画出时针,分针,秒针的交叉点

cxt.beginPath();

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

cxt.closePath();

//设置填充

cxt.fillStyle="gray";

cxt.fill();

//cxt.strokeStyle="red";

cxt.stroke();

//画出秒针的小圆点

cxt.beginPath();

cxt.arc(0,-140,5,0,360,false);

cxt.closePath();

//设置填充

cxt.fillStyle="gray";

cxt.fill();

//cxt.strokeStyle="red";

cxt.stroke();

cxt.restore();

}

function drawClock(){

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

drawNow();

}

drawNow();

setInterval(drawClock,1000);

读到这里，这篇“html5怎么绘制时钟动画”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。