[javascript]教你用canvas写一个时钟

楼主^#

更多发布于：2019-04-25 13:51

1.canvas原理
双缓冲画布,用户看到的是一个画布,我们操作的是内存中的画布,旋转是以左上角(0,0,)为原点.

2.使用方法\样式
颜色:
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
矩形:
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素
线条:
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
路径:
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
arc() 创建弧/曲线（用于创建圆形或部分圆）
转换:
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
等等

今天为大家分享的是利用canvas的绘图的属性画的一个时钟
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>canvas时钟</title>
</head>
<body>
<canvas width="500" height="500" style="background:#f1b0b7 ; margin:50px auto; display:block; " id="clock">
</canvas>
<script>
   var clock = document.getElementById("clock");
   var context = clock.getContext('2d');
   function drawClock() {
   context.clearRect(0, 0, 500, 500);
   var now = new Date(); //获取
   var minute = now.getMinutes(); //获取分
   var sec = now.getSeconds(); //获取秒
   var hour = now.getHours(); //获取小时
   hour = hour + minute / 60;
   hour = hour > 12 ? hour - 12 : hour; //转换成12小时制
   context.beginPath(); //开始绘制
   context.lineWidth = 4;
   context.strokeStyle = "black"; //表盘的颜色
   context.arc(250, 250, 200, 0, 360, false);// 绘制圆形，坐标250,250 半径200,圆形360度
   context.stroke(); //绘图
   context.closePath();// 结束画布
   //设置时针的样式
   for (var i = 0; i < 12; i++) {
   context.save();
   context.lineWidth = 7;
   context.strokeStyle = "black";
   context.translate(250, 250);
   context.rotate(i * 30 * Math.PI / 180);
   context.beginPath();
   context.moveTo(0, -180);// 从坐标0，-180开始
   context.lineTo(0, -200);//到坐标0，-200结束
   context.stroke(); //绘图
   context.closePath();
   context.restore();
   }
// for (var i = 0; i < 60; i++) { //这是分钟的刻度,我认为不是特好看,所以注释了,需要可以添加上
// context.save();
// context.lineWidth = 3;
// context.strokeStyle = "#000";
// context.translate(250, 250);
// context.rotate(i * 6 * Math.PI / 180);
// context.beginPath();
// context.moveTo(0, -180);
// context.lineTo(0, -190);
// context.stroke();
// context.closePath();
// context.restore();
//
// }
   for (var i = 0; i < 60; i++) { //时针
   context.save();
   context.lineWidth = 7;
   context.strokeStyle = "#000";
   context.translate(250, 250);
   context.rotate(hour * 30 * Math.PI / 180);
   context.beginPath();
   context.moveTo(0, -140);
   context.lineTo(0, 10);
   context.stroke();
   context.closePath();
   context.restore();
   }

   context.save();
   context.lineWidth = 5;
   context.strokeStyle = "#000";
   context.translate(250, 250);
   context.rotate(minute * 6 * Math.PI / 180);
   context.beginPath();
   context.moveTo(0, -160);
   context.lineTo(0, 15);
   context.stroke();
   context.closePath();
   context.restore();
   context.save();

   context.lineWidth = 3; //秒钟
   context.strokeStyle = "#f00";
   context.translate(250, 250);
   context.rotate(sec * 6 * Math.PI / 180);
   context.beginPath();
   context.moveTo(0, -185);
   context.lineTo(0, 20);
   context.stroke();
   context.closePath();
   context.beginPath();
   context.strokeStyle = "#f00";
   context.arc(0, 0, 5, 0, 360, false);
   context.fillStyle = "#fff";
   context.fill();
   context.closePath();
   context.beginPath();
   context.strokeStyle = "#f00";
   context.arc(0, -160, 5, 0, 360, false);
   context.fill();
   context.stroke();
   context.closePath();
   context.restore();
}
setInterval(drawClock,1000); //执行
</script>
</body>
</html>

喜欢1

[javascript]教你用canvas写一个时钟

最新喜欢：