画布canvas制造时钟

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
function Clock() {
// 时钟背景图
var Img = document.createElement('img');
Img.src = '01.jpg';
// Img.onload=function (){
ctx.drawImage(Img, 0, 0, 420, 420);
// }

// 时钟圆盘
ctx.beginPath(); //起始一条路径，或重置当前路径。
ctx.strokeStyle = '#60D9F8';//设置或返回用于笔触的颜色、渐变或模式。
ctx.lineWidth = 10; //设置或返回当前的线条宽度。
ctx.arc(210, 210, 200, 0, 2 * Math.PI, true); //画圆
ctx.clip(); //从原始画布剪切任意形状和尺寸的区域。
ctx.stroke();//绘制已定义的路径。
ctx.closePath();

// 分刻度 360/60=6
for (var i = 0; i < 60; i++) {
ctx.save(); //保存当前环境的状态。
ctx.beginPath();
ctx.translate(210, 210); //重新映射画布上的 (0,0) 位置。
ctx.rotate(i * 6 * Math.PI / 180);
ctx.strokeStyle = '#FEF319';
ctx.lineWidth = 5;
ctx.moveTo(0, -185); //路径移动到画布中的指定点，不创建线条。
ctx.lineTo(0, -195); //添加一个新点，然后在画布中创建从该点到最后指定点的线条。
ctx.stroke();
ctx.closePath(); //创建从当前点回到起始点的路径。
ctx.restore(); //返回之前保存过的路径状态和属性。
};

// 时刻度 360/12=30
for (var i = 0; i < 12; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(210, 210);
ctx.rotate(i * 30 * Math.PI / 180);
ctx.strokeStyle = '#60D9F8';
ctx.lineWidth = 8;
ctx.moveTo(0, -175);
ctx.lineTo(0, -195);
ctx.stroke(); //绘制已定义的路径。
ctx.closePath();
ctx.restore();
};

// 获取当前时间
var dates = new Date();
var h = dates.getHours();
var m = dates.getMinutes();
var s = dates.getSeconds();
h = h + m / 60;//3.5
m = m + s / 60;
// 画时间
var h2 = dates.getHours();
var m2 = dates.getMinutes();
var str1 = h2 > 9 ? h2 : ('0' + h2);
var str2 = m2 > 9 ? m2 : ('0' + m2);
ctx.beginPath();
ctx.fillStyle = '#FB1F11';
ctx.font = '26px 微软雅黑';
ctx.fillText(str1 + ':' + str2, 175, 340);
ctx.closePath();

// 时针
ctx.save();
ctx.beginPath();
ctx.translate(210, 210);
ctx.rotate(h * 30 * Math.PI / 180);
ctx.strokeStyle = '#60D9F8';
ctx.lineWidth = 8;
ctx.moveTo(0, 14);
ctx.lineTo(0, -130);
ctx.stroke();
ctx.closePath();
ctx.restore();

// 分钟
ctx.save();
ctx.beginPath();
ctx.translate(210, 210);
ctx.rotate(m * 6 * Math.PI / 180);
ctx.strokeStyle = '#FEF319';
ctx.lineWidth = 5;
ctx.moveTo(0, 14);
ctx.lineTo(0, -150);
ctx.stroke();
ctx.closePath();
ctx.restore();

// 秒针
ctx.save();
ctx.beginPath();
ctx.translate(210, 210);
ctx.rotate(s * 6 * Math.PI / 180);
ctx.strokeStyle = '#FB1F11';
ctx.lineWidth = 3;
ctx.moveTo(0, 14);
ctx.lineTo(0, -170);
ctx.stroke();
ctx.closePath();
//秒针上的圆
ctx.beginPath();
ctx.fillStyle = '#60D9F8';
ctx.strokeStyle = '#FB1F11';
ctx.lineWidth = 3;
ctx.arc(0, -155, 5, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.closePath();
//中心圆
ctx.beginPath();
ctx.fillStyle = '#60D9F8';
ctx.strokeStyle = '#FB1F11';
ctx.lineWidth = 3;
ctx.arc(0, 0, 7, 0, 2 * Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
Clock();
setInterval(Clock, 1000);

扫描二维码关注公众号，回复： 3174528 查看本文章

</script>

</html>

画布canvas制造时钟

猜你喜欢