canvas 时钟
示意图
步骤
- 外层空心圆盘lineWidth=14、半径140
- 画刻度，长度20，宽度8，外层空心圆盘与刻度之间距离20
- 分针刻度60个，每个6度，时针刻度12个，每个30度，
- 画时针,圆心外溢出80，收20
- 画分针,宽度10，圆心外溢112，收28
- 画秒针,宽度6，圆心外溢83，收30，颜色D40000
6.1 画圆心
6.2 画秒针头
- 设置定时器，每隔1s运行一次，并且每次调用之前要对过去执行过的用clearRect(0,0,canvas.width,canvas.height)清除，每次调用之后要对更改过的坐标置为原位！！！
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
setInterval(function () {
//原点重置
// 清画布
ctx.clearRect(0,0,canvas.width,canvas.height);
move();
ctx.translate(-150,-150);
},1000);
function move(){
ctx.save();
//初始化
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.strokeStyle = "black";
ctx.fillStyle = "#D40000";
ctx.beginPath();
//1.外层空心圆盘，使用一组save\restore做初始化
ctx.save();
ctx.strokeStyle = "#325FA2";
ctx.lineWidth=14;
//画弧开始
ctx.beginPath();
ctx.arc(150,150,140,0,Math.PI*2,true);
ctx.closePath();
//描边
ctx.stroke();
//返回之前保存过的路径状态和属性
ctx.restore();
ctx.translate(150,150);
//2.画刻度，长度20，宽度8，外层空心圆盘与刻度之间距离20
ctx.save();
for(let i =0;i<12;i++){
ctx.rotate(30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,120);
ctx.lineTo(0,100);
//描边
ctx.stroke();
}
ctx.restore();
//3.分针刻度
ctx.save();
ctx.lineWidth=4;
for(let i =0;i<60;i++){
ctx.rotate(6*Math.PI/180);
//重合的不画
ctx.beginPath();
ctx.moveTo(0,120);
ctx.lineTo(0,117);
//描边
ctx.stroke();
}
ctx.restore();
//时针分针秒针
var date = new Date();
var s =date.getSeconds();
var m =date.getMinutes()+s/60;
var h =date.getHours()+m/60;
h = h%12;
console.log(h);
//4.时针,圆心外溢出80，收20
ctx.save();
ctx.lineWidth=14;
ctx.rotate(h*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-80);
ctx.lineTo(0,20);
//描边
ctx.stroke();
ctx.restore();
//5.分针,宽度10，圆心外溢112，收28
ctx.save();
ctx.lineWidth=11;
ctx.rotate(m*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-112);
ctx.lineTo(0,28);
//描边
ctx.stroke();
ctx.restore();
//6.秒针,宽度6，圆心外溢83，收30，颜色D40000
ctx.save();
ctx.rotate(s*6*Math.PI/180);
ctx.strokeStyle="#D40000";
ctx.beginPath();
ctx.moveTo(0,-83);
ctx.lineTo(0,30);
//描边
ctx.stroke();
//6.1.画中心圆
ctx.beginPath();
ctx.arc(0,0,10,0,360*Math.PI/180)
ctx.fill();
//6.2秒头
ctx.beginPath();
ctx.arc(0,-96,10,0,360*Math.PI/180);
ctx.stroke();
ctx.restore();
}
}
}
</script>
</head>
<body onload="draw();">
<p>clock</p>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
canvas 时钟案例