canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟，记录下来的代码，每句做了注解便于以后学习，原先每次边听别的课边敲码，错误百出，明明原封不动复制的代码，就会出错，还找不到原因，今天可能运气好，虽然bug百出，好在全解决了，很开心，一丢丢的满足感，哈哈。代码如下：
HTML部分代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div { text-align: center; margin-top: 250px; } #clock { border: 1px solid #ccc; } </style> <script src="clock.js" type="text/javascript"></script> </head> <body> <div> <canvas id="clock" height="200px" width="200px" ></canvas> </div> </body> </html>
JavaScript代码：(ps:因为代码行中有 ‘/’ ,如果在用JS的 '//' or '/**/' 注释,就会有bug,这个不知道咋处理)
window.onload = function() { var dom = document.getElementById('clock'); var ctx = dom.getContext('2d');//获取到画布的上下文，我理解是获取到一个二维画面 var width = ctx.canvas.width; //获取画布的宽 var height = ctx.canvas.height; //获取画布的高 var r = width / 2; <!--获取画布的半径--> var rem = width / 200; <!--时钟放大缩小的比例--> <!--绘制时钟的外圆--> function drawBackground() { ctx.save(); //保存背景环境状态 ，每次画的时候圆点在中心 ctx.translate(r, r);//重新映射圆点(0, 0)的位置，映射到画布中心 ctx.beginPath(); //起始一个路径, 绘制外围圆 ctx.lineWidth = 10 * rem; //设置或返回当前线条的宽度 ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2*Math.PI, false); <!--arc()方法创建弧或曲线 中间六个参数分别为：圆中心x坐标，圆中心y坐标，圆半径，起始角，结束角，规定应该逆时针还是顺时针绘图（false = 顺时针，true = 逆时针）--> ctx.stroke(); //绘制已有的路径 <!--填充时钟的小时数--> var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];//创建一个数组存小时数 ctx.font = 18 * rem + 'px Arial'; //设置小时数的字体大小 ctx.textAlign = 'center'; //设置小时数的文本位置 ctx.textBaseline = 'middle'; //设置小时数使用的当前文本基线 hourNumbers.forEach(function(number, i) { //遍历每个小时数，获取每个小时数的坐标，传入参数：小时数，索引 var rad = 2 * Math.PI / 12 * i; <!--各个小时对应的弧度数，2∏比上12*对应的索引值i-> var x = Math.cos(rad) * (r - 30 * rem); //各个小时对用的x坐标，半径比圆的半径小，随意减一个值 var y = Math.sin(rad) * (r - 30 * rem); //各个小时对应的y坐标 ctx.fillText(number, x, y); //方法用于在画布里填充小时数，对用参数：小时数，x坐标，y坐标 }); <!--绘制每个小时，分钟数对用的圆点--> for(var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; <!--1h = 60m ,各个分钟对应的弧度数，2∏比上60*对应的索引值i-> var x = Math.cos(rad) * (r - 18 * rem); //每分钟对用的x坐标，圆点在小时外侧，所以半径比小时对应的半径大一点 var y = Math.sin(rad) * (r - 18 * rem); //每分钟对应的y坐标 ctx.beginPath(); //绘制小圆点的路径 if (i % 5 === 0) {//判断小时点对应的数填充黑色 ctx.fillStyle = '#000'; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); } else { //不是小时数对应的点填充灰色 ctx.fillStyle = '#ccc'; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); } ctx.fill(); //填充小圆点 } } <!--绘制时钟--> function drawHour(hour, minute) { ctx.save(); //保存画小时的环境状态 ctx.beginPath(); //绘制小时线 var rad = 2 * Math.PI / 12 * hour; <!--小时转动的弧度--> var mrad = 2 * Math.PI / 12 / 60 * minute; <!--分钟转动的弧度，每小时转动的弧度/60为每分钟转动的弧度，在乘以分钟数--> ctx.rotate(rad + mrad); //旋转, 小时弧度+分钟弧度 ctx.lineWidth = 6; //线条宽度 ctx.lineCap = 'round'; //线条端点的样式 ctx.moveTo(0, 10 * rem); //线条起始位置，在圆点下方一点 ctx.lineTo(0, -r / 2); <!--线条结束位置，指向12点方向，圆点往上是负--> ctx.stroke(); //绘制线条 ctx.restore(); //返回画小时之前的环境状态 } <!--绘制分针--> function drawMinute(minute) { ctx.save(); //保存画分钟的环境状态 ctx.beginPath(); //绘制分钟线 var rad = 2 * Math.PI / 60 * minute; <!--线条转动的弧度--> ctx.rotate(rad); //旋转 ctx.lineWidth = 3; //线条宽度 ctx.lineCap = 'round'; //线条端点的样式 ctx.moveTo(0, 10 * rem); //线条起始位置，在圆点下方一点 ctx.lineTo(0, -r + 30 * rem); <!--线条结束位置，指向12点方向，圆点往上是负--> ctx.stroke(); //绘制线条 ctx.restore(); //返回画分钟之前的环境状态 } <!--绘制秒钟--> function drawSecond(second) { ctx.save(); //保存画秒钟的环境状态 ctx.beginPath(); //绘制秒钟线 ctx.fillStyle = '#c14543'; //填充秒针的颜色 var rad = 2 * Math.PI / 60 * second; <!--线条转动的弧度--> ctx.rotate(rad); //旋转 ctx.moveTo(-2 * rem, 20 * rem); ctx.lineTo(2 * rem, 20 * rem); //绘制成一头粗一头细 ctx.lineTo(1, -r + 18* rem); ctx.lineTo(-1, -r + 18* rem); ctx.fill(); //不用绘制，选择填充 ctx.restore(); //返回画秒钟之前的环境状态 } <!--绘制中心点--> function drawDot() { ctx.beginPath(); //绘制中心圆点的线条 ctx.fillStyle = '#fff'; //填充白色 ctx.arc(0, 0, 3* rem, 0, 2 * Math.PI, false); //圆点弧线 ctx.fill(); //填充 } function draw() { ctx.clearRect(0, 0, width, height);// 每次画时钟，先清除一次canvas在重新画 var now = new Date(); //获取当前时间 var hour = now.getHours(); //获取当前小时 var minute = now.getMinutes(); //获取当前分钟 var second = now.getSeconds(); //获取当前秒钟 drawBackground();//调用这个函数 drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore(); //返回之前状态，意味着圆点回到左上角 } draw(); //先运行一次 setInterval(draw, 1000); //每隔一秒钟调用一次draw }
