html5绘图数字时钟动漫

日期:2021-02-25 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>


拷贝编码
编码以下:

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⑴2: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,⑴70);
cxt.lineTo(0,⑴90);
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,⑴80);
cxt.lineTo(0,⑴90);
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,⑴40);
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,⑴60);
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,⑴70);
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,⑴40,5,0,360,false);
cxt.closePath();
//设定填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();</p> <p> cxt.restore();</p> <p>}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);