js+Canvas实现时钟图，简单易懂

本文主要参考[canvas入门](https://www.runoob.com/html/html5-canvas.html)网址，加上自己理解将钟表图用原生js写出来，有两个难点
1.整个时钟的实现的难点和重点是save（）和restore（）的进栈出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈
2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章[更好的理解requestAnimFrame()](https://blog.csdn.net/whqet/article/details/42911059)
下面是全部代码，粘贴，在谷歌浏览器可以完美运行。
3.觉得文章还可以的朋友，还请点一下右下角的看一看（也就是以前的赞，欢迎关注微信公众号：前端从入门到SP
4.接下来可能写一个主要是和html5和css3实现的东西，因为真的强大，和高效，有可能做个热力图。

[/code][code]

复制代码

[/code][code]

复制代码

cloak

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

//为了让requestAnimFrame兼容所有的浏览器，耽误了大量的时间，两小时。本人用的最新的谷歌浏览器，气，这个优点很多相比定时器

复制代码

window.requestAnimFrame = (function() {

复制代码

return window.requestAnimationFrame ||

复制代码

window.webkitRequestAnimationFrame ||

复制代码

window.mozRequestAnimationFrame ||

复制代码

function(callback) {

复制代码

window.setTimeout(callback, 6000 / 60);

复制代码

};

复制代码

})();

复制代码

[/code][code] function draw() {

复制代码

var canvas = document.getElementById('cloak');

复制代码

if (!canvas.getContext) return;

复制代码

var ctx = canvas.getContext("2d");

复制代码

ctx.clearRect(0, 0, 800, 800);

复制代码

ctx.save();

复制代码

ctx.translate(400, 400);

复制代码

let timer = new Date();

复制代码

let sec = timer.getSeconds();

复制代码

let min = timer.getMinutes();

复制代码

let hour = timer.getHours();

复制代码

// 绘制秒针

复制代码

ctx.save();

复制代码

ctx.rotate(Math.PI * 2 * sec / 60);

复制代码

ctx.beginPath();

复制代码

ctx.moveTo(0, 0);

复制代码

ctx.lineTo(0, -105);

复制代码

ctx.lineWidth = 2;

复制代码

ctx.strokeStyle = "green";

复制代码

ctx.closePath();

复制代码

ctx.stroke();

复制代码

ctx.restore();

复制代码

//绘制分针

复制代码

ctx.save();

复制代码

ctx.rotate(Math.PI * 2 * min / 60);

复制代码

ctx.beginPath();

复制代码

ctx.moveTo(0, 0);

复制代码

ctx.lineTo(0, -80);

复制代码

ctx.strokeStyle = 'orange';

复制代码

ctx.lineWidth = 3;

复制代码

ctx.closePath();

复制代码

ctx.stroke();

复制代码

ctx.restore();

复制代码

//绘制时针

复制代码

ctx.save();

复制代码

ctx.rotate(Math.PI * 2 * hour / 12);

复制代码

ctx.beginPath();

复制代码

ctx.moveTo(0, 0);

复制代码

ctx.lineTo(0, -70);

复制代码

ctx.strokeStyle = 'red';

复制代码

ctx.lineWidth = 5;

复制代码

ctx.closePath();

复制代码

ctx.stroke();

复制代码

ctx.restore();

复制代码

//中心的原点

复制代码

ctx.beginPath();

复制代码

ctx.arc(0, 0, 2, 0, 2 * Math.PI);

复制代码

ctx.strokeStyle = "red";

复制代码

ctx.stroke();

复制代码

//绘制表盘

复制代码

for (let i = 1; i < 13; i++) {

复制代码

ctx.save();

复制代码

ctx.rotate(Math.PI * 2 * i / 12);

复制代码

ctx.beginPath();

复制代码

ctx.moveTo(0, 100);

复制代码

ctx.lineTo(0, 110);

复制代码

ctx.strokeStyle = 'blue';

复制代码

ctx.lineWidth = i % 3 ? 2 : 4;

复制代码

ctx.strokeStyle = i % 3 ? "blue" : "red";

复制代码

ctx.closePath();

复制代码

ctx.stroke();

复制代码

ctx.restore();

复制代码

}

复制代码

ctx.restore();

复制代码

requestAnimFrame(draw);

复制代码

};

复制代码

requestAnimFrame(draw);

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

[code][/code]

js+Canvas实现时钟图，简单易懂

浏览过的版块