<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="mycanvas" height="1000" width="1000"></canvas>
</body>
<script>
//save和restore方法
//restore只能回复到save之后，如果在save前已经调用过其他操作画布的方法，是不能通过restore还原的
//调用了restore方法将画布恢复,但是刚才时针已经被绘制在屏幕上，此时不会再受到画布的影响
//要对restore和save相当的了解
var c = document.getElementById("mycanvas");
//console.log(c);
var ctx = c.getContext("2d");
//console.log(ctx);
c.width = window.innerWidth;
c.height = window.innerHeight;
var width=ctx.canvas.width; //获取当前canvas的宽高
var height=ctx.canvas.height;
console.log(width, height);
function rads(x) {
return Math.PI*x/180;
}
//console.log(rads(360));
/*先画一个圆圈圈*/
function arcPlot(c,x,y,r) {
c.save();
c.translate(x,y);
c.beginPath();
c.arc(0,0,r,0,rads(360));
c.lineWidth = '5px';
c.strokeStyle = 'red';
c.stroke();
}
/*画时钟*///因为有旋转的操作,为了不影响后面的分钟秒钟画法,必须回复到最初始的状态,所以用save和restore.
function hour(h,m) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.rotate(2*Math.PI/12*(h-3)+2*Math.PI/12/60*m);
ctx.lineTo(40,0);
ctx.strokeStyle = "blue";
ctx.stroke();
ctx.restore();
}
/*画分钟*/
function minute(m) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.rotate(2*Math.PI/60*(m-15));
ctx.lineTo(60,0);
ctx.strokeStyle = "green";
ctx.stroke();
ctx.restore();
}
/*画秒钟*/
function second(s) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.rotate(2*Math.PI/60*(s-15));
//console.log(2*Math.PI/60*(s-15));
ctx.lineTo(80,0);
ctx.strokeStyle = "orange";
ctx.stroke();
ctx.restore();
//console.log(seconds);
}
/*开始画刻度*/
function plotLine() {
for (var i = 0; i < 60; i++) {
ctx.beginPath();
if (i % 5 == 0) {
ctx.moveTo(80, 0);
ctx.lineTo(100, 0);
ctx.lineWidth = "4px";
}else{
ctx.moveTo(90, 0);
ctx.lineTo(100, 0);
ctx.lineWidth = "3px";
}
ctx.rotate(rads(6));
ctx.strokeStyle = "black";
ctx.stroke();
}
}
/*如何使时钟动起来*/
function draw() {
//debugger;
ctx.clearRect(-500,-500,2000,2000); //每秒清除一次矩形
ctx.save(); //这个save的位置很重要,放错了,就得不到我们想要的结果
//console.log(window.innerWidth, window.innerHeight);
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
arcPlot(ctx,500,500,100);
plotLine();
hour(h,m);
minute(m);
second(s);
ctx.restore();
}
//定时器
setInterval(draw, 1000);
draw(); //先执行一次，不然页面会卡一下。
</script>
</html>
