听了慕课网Sliav Zhou 的课程canvas绘制时钟，记录下来的代码，每句做了注解便于以后学习，原先每次边听别的课边敲码，错误百出，明明原封不动复制的代码，就会出错，还找不到原因，今天可能运气好，虽然bug百出，好在全解决了，很开心，一丢丢的满足感，哈哈。代码如下：

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); 
         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; 
         for(var i = 0; i < 60; i++) {        var rad = 2 * Math.PI / 60 * i; 
     function drawHour(hour, minute) {    ctx.save(); //保存画小时的环境状态    ctx.beginPath(); //绘制小时线    var rad = 2 * Math.PI / 12 * hour; 
         var mrad = 2 * Math.PI / 12 / 60 * minute; 
         ctx.rotate(rad + mrad); //旋转, 小时弧度+分钟弧度    ctx.lineWidth = 6; //线条宽度    ctx.lineCap = 'round'; //线条端点的样式    ctx.moveTo(0, 10 * rem); //线条起始位置，在圆点下方一点    ctx.lineTo(0, -r / 2); 
         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); 
         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}