就是很简单的一个时钟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style=" background-color: black"></canvas>
<script>
window.onload=function(){
run();
}
//获取canvas对象
var cvs=document.querySelector("#myCanvas");
//获取绘画的环境
var cxt=cvs.getContext("2d");
//加载图片进来
var img = new Image();
img.src="img/1.png";
//加载run()函数
window.onload=function(){
run();
}
function run(){
//获取时间
var data=new Date();
var h = data.getHours();
var m = data.getMinutes();
var s = data.getSeconds();
//时分秒前面补0,显示更真实的数字时钟
function bu(x) {
x=x<10?"0"+x:x;
return x;
}
//拼接时间
var str=bu(h)+":"+bu(m)+":"+bu(s);
//把多的秒和分钟转化为分和小时,从而实现更真实的时钟走动
h +=(m/60);
m += (s/60);
//画圆
cxt.save();
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*2,true);
cxt.strokeStyle="white";
cxt.lineWidth="5";
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
//裁剪图片
cxt.clip();
//填充图片
cxt.drawImage(img,-150,-50);
cxt.save();
cxt.beginPath();
cxt.arc(250,250,10,0,Math.PI*2,true);
cxt.fillStyle="red";
cxt.fill();
cxt.closePath();
cxt.restore();
//画刻度
//画小时的刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.beginPath();
cxt.translate(250,250)
cxt.rotate(Math.PI*2/12*i);
cxt.moveTo(0,180);
cxt.lineTo(0,200);
cxt.lineWidth="3";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//画分钟的刻度
for(var j=0;j<60;j++){
cxt.save();
cxt.beginPath();
cxt.translate(250,250)
cxt.rotate(Math.PI*2/60*j);
cxt.moveTo(0,190);
cxt.lineTo(0,200);
cxt.lineWidth="2";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//画时针
cxt.save();
cxt.lineWidth="10";
cxt.strokeStyle="pink";
cxt.translate(250,250);
cxt.rotate(h*Math.PI*2/12);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-110);
cxt.closePath();
cxt.stroke();
cxt.restore();
//画分针
cxt.save();
cxt.beginPath();
cxt.translate(250,250)
cxt.rotate(m*Math.PI*2/60);
cxt.moveTo(0,10);
cxt.lineTo(0,-150);
cxt.lineWidth="6";
cxt.strokeStyle="orange";
cxt.stroke();
cxt.closePath();
cxt.restore();
//画秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#FF0000";
cxt.translate(250, 250);
cxt.rotate(s * 6 * Math.PI / 180);//每秒旋转6度
cxt.beginPath();
cxt.moveTo(0, 10);
cxt.lineTo(0, -170);
cxt.stroke();
cxt.closePath();
//美化表盘,画中间的小圆
cxt.beginPath();
cxt.arc(0, 0, 7, 0, 360);
cxt.fillStyle = "cyan";
cxt.fill();
cxt.strokeStyle = "black";
cxt.stroke();
cxt.closePath();
//秒针上的小圆
cxt.beginPath();
cxt.arc(0, -140, 7, 0, 360);
cxt.fillStyle = "cyan";
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
//文字
cxt.save();
cxt.font="15px 微软幼圆";
cxt.strokeStyle="white";
cxt.textAlign="center";
cxt.strokeText("Desigin By chenng_7",250,370)
//绘制文字
cxt.fillText("Desigin By chenng_7",250,370);
cxt.restore();
//绘制电子时钟
cxt.save();
cxt.beginPath();
cxt.font="17px 微软雅黑";
cxt.strokeStyle="cyan";
cxt.textAlign="center";
cxt.strokeText(str,250,330);
cxt.closePath();
cxt.restore();
}
//定时器
setInterval("run()",1000);
</script>
</body>
</html>
加载图片进来的时候改下图片路径即可。
看下运行结果
运行效果