<!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>
<style>
body {
background: #000000;
}
#c1 {
background: #ffffff;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
<script>
var oC = document.getElementById("c1");
var cvsCtx = oC.getContext("2d");
var sAngle = 0;
var eAngle = 2 * Math.PI;
function toDraw() {
var x = 200;
var y = 200;
var r = 150;
var date = new Date();
var oHour = date.getHours();
var oMin = date.getMinutes();
var oSen = date.getSeconds();
var oHourValue =
(((360 * oHour) / 12 - 90 + (oMin / 60) * 30) * Math.PI) / 180;
var oMinValue = (((360 * oMin) / 60 - 90) * Math.PI) / 180;
var oSencond = (((360 * oSen) / 60 - 90) * Math.PI) / 180;
var angle = 6;
var num = 0;
cvsCtx.clearRect(0, 0, 400, 400);
cvsCtx.beginPath();
for (let i = 0; i <= 60; i++) {
cvsCtx.moveTo(x, y);
cvsCtx.arc(
x,
y,
r,
(6 * i * Math.PI) / 180,
(6 * (i + 1) * Math.PI) / 180,
false
);
cvsCtx.stroke();
}
cvsCtx.closePath();
cvsCtx.beginPath();
cvsCtx.save();
cvsCtx.arc(x, y, r - 15, 0, 2 * Math.PI);
cvsCtx.fillStyle = "#fff";
cvsCtx.strokeStyle = "#fff";
cvsCtx.fill();
cvsCtx.closePath();
cvsCtx.stroke();
cvsCtx.restore();
cvsCtx.beginPath();
cvsCtx.save();
cvsCtx.lineWidth = 4;
for (var i = 0; i < 12; i++) {
cvsCtx.moveTo(x, y);
cvsCtx.arc(
x,
y,
r,
(30 * i * Math.PI) / 180,
(30 * (i + 1) * Math.PI) / 180,
false
);
cvsCtx.stroke();
}
cvsCtx.restore();
cvsCtx.beginPath();
cvsCtx.save();
cvsCtx.arc(x, y, r - 25, 0, 2 * Math.PI);
cvsCtx.fillStyle = "#fff";
cvsCtx.strokeStyle = "#fff";
cvsCtx.fill();
cvsCtx.closePath();
cvsCtx.stroke();
cvsCtx.restore();
cvsCtx.beginPath();
cvsCtx.moveTo(x, y);
cvsCtx.lineWidth = 5;
cvsCtx.arc(x, y, r - 100, oHourValue, oHourValue);
cvsCtx.stroke();
cvsCtx.restore();
cvsCtx.beginPath();
cvsCtx.moveTo(x, y);
cvsCtx.arc(x, y, r - 80, oMinValue, oMinValue);
cvsCtx.lineWidth = 3;
cvsCtx.stroke();
cvsCtx.closePath();
cvsCtx.beginPath();
cvsCtx.moveTo(x, y);
cvsCtx.lineWidth = 1;
cvsCtx.arc(x, y, r - 20, oSencond, oSencond);
cvsCtx.stroke();
cvsCtx.closePath();
cvsCtx.closePath();
}
toDraw();
setInterval(toDraw, 1000);
</script>
</html>
canvas---3圆 画一个钟表
猜你喜欢
转载自blog.csdn.net/weixin_41069726/article/details/89424698
今日推荐
周排行