<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
body{background-color: rgba(0, 0, 0, 0.1)}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var myAction = {},
ctx, earchSpeed = 60,
moonSpeed = 6;
var dom = {
earchSpeed: $('#m-earth-speed'),
moonSpeed: $('#m-moon-speed'),
btn: $('#m-btn'),
canvas: $('#myCanvas')
};
$.extend(myAction, {
initCanvas: function() {
ctx = dom.canvas[0].getContext("2d");
myAction.draw(ctx);
},
draw: function(ctx) {
requestAnimationFrame(function step() {
myAction.drawDial(ctx); //绘制表盘
myAction.drawAllHands(ctx); //绘制时分秒针
requestAnimationFrame(step);
});
},
/*绘制时分秒针*/
drawAllHands: function(ctx) {
var time = new Date();
var s = time.getSeconds();
var m = time.getMinutes();
var h = time.getHours();
var pi = Math.PI;
var secondAngle = pi / 180 * 6 * s; //计算出来s针的弧度
var minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //计算出来分针的弧度
var hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //计算出来时针的弧度
myAction.drawHand(hourAngle, 60, 6, "red", ctx); //绘制时针
myAction.drawHand(minuteAngle, 106, 4, "green", ctx); //绘制分针
myAction.drawHand(secondAngle, 129, 2, "blue", ctx); //绘制秒针
},
/*绘制时针、或分针、或秒针
* 参数1：要绘制的针的角度
* 参数2：要绘制的针的长度
* 参数3：要绘制的针的宽度
* 参数4：要绘制的针的颜色
* 参数4：ctx
* */
drawHand: function(angle, len, width, color, ctx) {
ctx.save();
ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
ctx.beginPath();
ctx.moveTo(-4, 0);
ctx.lineTo(len, 0); // 沿着x轴绘制针
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.lineCap = "round";
ctx.stroke();
ctx.closePath();
ctx.restore();
},
/*绘制表盘*/
drawDial: function() {
var pi = Math.PI;
ctx.clearRect(0, 0, 300, 300); //清除所有内容
ctx.save();
ctx.translate(150, 150); //一定坐标原点到原来的中心
ctx.beginPath();
ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
ctx.stroke();
ctx.closePath();
for (var i = 0; i < 60; i++) { //绘制刻度。
ctx.save();
ctx.rotate(-pi / 2 + i * pi / 30); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
ctx.beginPath();
ctx.moveTo(110, 0);
ctx.lineTo(140, 0);
ctx.lineWidth = i % 5 ? 2 : 4;
ctx.strokeStyle = i % 5 ? "blue" : "red";
ctx.stroke();
ctx.closePath();
ctx.restore();
}
ctx.restore();
}
});
var init = function() {
myAction.initCanvas();
}();
})
</script>
</body>
</html>