使用Canvas(画布）完成一个时钟

Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。

canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。

<canvas id="can" width="300" height="300">您的浏览器不支持canvas</canvas>

canvas创建完了后，主要就依靠javascript完成它的功能了~

在<script></script>里，首先找到指定画布，然后创建2Dcontext对象。------这是写canvas必须的步骤！
```
var can = document.getElementById("can");
var ctx = can2.getContext("2d");
```
开始写绘制时钟函数，function drawclock()；
首先需要把保存函数放在最前面。然后，由于开始的canvas的中心是在容器最左上角，而我们的时钟图需要以整个canvas的中央作为圆点，因此需要用translate()，使中心居中！然后由于，默认的canvas的方向是水平向右和垂直向下的，而我们希望时钟的起始方向是x轴对着12点钟方向所以要使中心再旋转逆时针90度。以及设置线宽，线头形状和颜色。
```
ctx.save();ctx.translate(150, 150);
ctx.rotate(-Math.PI / 2);
ctx.lineWidth = 6;
ctx.strokeStyle = "blue";
ctx.lineCap = "round";
```
下面写表盘刻度。分两种刻度，时针、分针。时针的刻度。一共有十二个时针的刻度，每个刻度就是30度。使用for循环循环12次。每次旋转30度。每次的起点是（100,0），终点是（120,0），设置了起点终点和角度后就是用stroke()描边。
```
for (var i = 0; i < 12; i++) {ctx.beginPath();ctx.rotate(Math.PI / 6);ctx.moveTo(100, 0);ctx.lineTo(120, 0);ctx.stroke();
}     注意，这里的循环第一句是beginpath()，它的作用就是循环每执行完一次，context回到原点处。这一句不要忘了
```

同样的，对于分针，就是60个刻度，每个刻度就是6度。为了区分，设置线宽比时针的线宽小一点，长度也短一点，颜色也选个不一样的。

for (var k = 0; k < 60; k++) {ctx.strokeStyle = "red";ctx.beginPath();ctx.rotate(Math.PI / 30);ctx.moveTo(118, 0);ctx.lineTo(120, 0);ctx.stroke();
}

5.刻度写好了，接下来就是确定，随着时间的推移，每一秒，我们的时针和分针、秒针应该停在哪个地方。

首先新建一个日期对象，获取时、分、秒三个变量！

var time = new Date();
var s = time.getSeconds();
var m = time.getMinutes();
var h = time.getHours();
if (h > 12) {h -= 12;
}  这里有一个细节，因为系统时间是24h制，而我们的时钟刻度，只有12H,因此，H>12时，h-=12.

时针的旋转角度为

时针的角度=360/12*小时+360/12/60分钟+360/12/60/60秒;
//                    换算成弧度
//                    时针的弧度= π/6*小时+π/360*分钟+π/2160*秒

分针的角度

分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒

秒针的角度

 秒针的角度=360/60*秒秒针的弧度 =π/30*秒

秒针、分针、时针为了区别，它们的长度不一，起点也不一，就像我们日常中看到的那样！

然后要用restore和save恢复和保存之前的绘图设置。

   ctx.save();ctx.lineWidth = 9;ctx.beginPath();ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);ctx.moveTo(-20, 0);ctx.lineTo(80, 0);ctx.stroke();ctx.restore();
//                    分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒ctx.save();ctx.lineWidth = 7;ctx.beginPath();ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);ctx.moveTo(-20, 0);ctx.lineTo(112, 0);ctx.stroke();ctx.restore();
//                    秒针的角度=360/60*秒秒针的弧度 =π/30*秒ctx.save();ctx.lineWidth = 6;ctx.strokeStyle = "green";ctx.beginPath();ctx.rotate((Math.PI / 30) * s);ctx.moveTo(-30, 0);ctx.lineTo(120, 0);ctx.stroke();ctx.restore();

6.需要在时钟中央绘制一个圆点，先用beginpath()让canvas回到起点，再选半径为10，用fill填充，红色。

ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.restore();

7.到此，好像该做的都做完了。其实不然，这样只能得到一个你打开页面时刻的时钟图，要实现动态的时钟，需要每秒刷新，这就需要用setInterval（）函数的功能，每1000ms，运行一次drawclock（）函数，这样就每一秒画一次,显示的就是时钟啦！

setInterval("drawclock()",1000);

大功告成！！

觉得讲清楚的小伙伴请转发、点赞、支持！

完整代码如下：

。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>practice</title><style>canvas{border: 2px solid red;}</style>
</head>
<body ><h3 >手绘时钟</h3>
<canvas id="can2" width="300" height="300">您的浏览器不支持canvas</canvas>
<script>var can2 = document.getElementById("can2");var ctx = can2.getContext("2d");drawclock(); //此处先引用函数是为了防止加载完页面的第一秒有空白画面。function drawclock() {ctx.save();ctx.clearRect(0,0,300,300);ctx.translate(150, 150);ctx.rotate(-Math.PI / 2);ctx.lineWidth = 6;ctx.strokeStyle = "blue";ctx.lineCap = "round";for (var i = 0; i < 12; i++) {ctx.beginPath();ctx.rotate(Math.PI / 6);ctx.moveTo(100, 0);ctx.lineTo(120, 0);ctx.stroke();}for (var k = 0; k < 60; k++) {ctx.strokeStyle = "red";ctx.beginPath();ctx.rotate(Math.PI / 30);ctx.moveTo(118, 0);ctx.lineTo(120, 0);ctx.stroke();}var time = new Date();var s = time.getSeconds();var m = time.getMinutes();var h = time.getHours();if (h > 12) {h -= 12;}
//                    时针的角度=360/12*小时+360/12/60分钟+360/12/60/60秒;
//                    换算成弧度
//                    时针的弧度= π/6*小时+π/360*分钟+π/2160*秒ctx.save();ctx.lineWidth = 9;ctx.beginPath();ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);ctx.moveTo(-20, 0);ctx.lineTo(80, 0);ctx.stroke();ctx.restore();
//                    分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒ctx.save();ctx.lineWidth = 7;ctx.beginPath();ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);ctx.moveTo(-20, 0);ctx.lineTo(112, 0);ctx.stroke();ctx.restore();
//                    秒针的角度=360/60*秒秒针的弧度 =π/30*秒ctx.save();ctx.lineWidth = 6;ctx.strokeStyle = "green";ctx.beginPath();ctx.rotate((Math.PI / 30) * s);ctx.moveTo(-30, 0);ctx.lineTo(120, 0);ctx.stroke();ctx.restore();
//                    在钟表中心绘制一个圆点.ctx.beginPath();ctx.arc(0, 0, 10, 0, Math.PI * 2, true);ctx.fillStyle = "yellow";ctx.fill();ctx.restore();}setInterval("drawclock()",1000);
</script>
</body>
</html>

使用Canvas(画布）完成一个时钟相关推荐

android canvas 画按钮,Android 用Canvas轻松绘制一个时钟
接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
LV2之-----canvas 画布实现自转时钟大转盘
canvas 画布运用实例:1.系统时钟 <!DOCTYPE html> <html lang="en"><head><meta char ...
Canvas画布完成一个数字钟表
Canvas最初由苹果推出,后来由W3C推广,目前几乎所有浏览器都支持Canvas. canvas是一个闭合标签,包括宽度和高度属性.默认值为宽300,高150.浏览器不支持canvas时,canva ...
canvas绘制精细走动时钟
这里简单了利用canvas做了一个时钟,能够实现分针和时针较精确的走动,没有太多难点,重点的是要实现分针和时针走动,角度的计算,笔者在下面进行说明.先看效果图: 颜色单配的比较难看,读者谅解.请看代码 ...
利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
Android 自定义控件-Canvas和Paint绘图详解-手把手带你绘制一个时钟.
Android - Paint基础在自定义控件时,经常需要使用canvas.paint等,在canvas类中,绘画基本都是靠drawXXX()方法来完成的,在这些方法中,很多时候都需要用到paint ...
震惊！Canvas原来还能这么搞！代码画一个时钟出来
学会了Canvas之后,发现canvas几乎什么都能画,看着自己家里的时钟突发奇想,能不能利用canvas画一个时钟出来呢?说搞就搞! 直接上代码: <!DOCTYPE html> < ...

使用Canvas(画布）完成一个时钟

Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。

使用Canvas(画布）完成一个时钟相关推荐

最新文章

热门文章