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); 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 }