Canvas最初由苹果推出,后来由W3C推广,目前几乎所有浏览器都支持Canvas。
canvas是一个闭合标签,包括宽度和高度属性。默认值为宽300,高150。浏览器不支持canvas时,canvas的文本会显示,通常用来检测浏览器兼容性。
<canvas id="can" width="300" height="300">您的浏览器不支持canvas</canvas>
canvas创建完了后,主要就依靠javascript完成它的功能了~
1、在里,首先找到指定画布,然后创建2Dcontext对象。------这是写canvas必须的步骤!
var can = document.getElementById("can");
var ctx = can2.getContext("2d");
2、开始写绘制时钟函数,function drawclock();
3、首先需要把保存函数放在最前面。然后,由于开始的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";
4、下面写表盘刻度。分两种刻度,时针、分针。时针的刻度。 一共有十二个时针的刻度,每个刻度就是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>