使用canvas绘制时钟
首先创建画布
<canvas id="clock" width="500" height="500" style="background: transparent;"></canvas>
然后设计画布样式
var canvas=document.getElementById("clock"); var cxt=canvas.getContext("2d"); function drawClock(){ //获取系统时间 var date=new Date; var hour=date.getHours(); var min=date.getMinutes(); var sec=date.getSeconds(); //清空画布 cxt.clearRect(0,0,canvas.width,canvas.height); var img=new Image(); img.src="nanchen.png"; cxt.drawImage(img,40,40,420,420); //起始一条路径 cxt.strokeStyle="#0fffff"; cxt.lineWidth="10"; cxt.beginPath(); cxt.arc(250,250,200,0,Math.PI*2,false); cxt.stroke(); //结束路径 cxt.closePath(); cxt.clip(); //绘制时刻度 for(var i=0;i<12;i++){ cxt.save(); cxt.strokeStyle="yellow"; cxt.lineWidth="7"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(30*i*Math.PI/180);//隔三十度画一个时刻度 cxt.beginPath(); cxt.moveTo(0,-195); cxt.lineTo(0,-175); cxt.stroke(); cxt.closePath(); cxt.restore(); } //绘制分刻度 360/60=6 for(var i=0;i<60;i++){ cxt.save(); cxt.strokeStyle="yellow"; cxt.lineWidth="5"; //设置原点 cxt.translate(250,250); cxt.rotate(6*i*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-195); cxt.lineTo(0,-185); cxt.stroke(); cxt.closePath(); //设置旋转角度 cxt.restore(); } //绘制时针 cxt.save(); cxt.strokeStyle="#00ffff"; cxt.lineWidth="7"; //设置原点 cxt.translate(250,250); cxt.rotate(hour*30*Math.PI/180);//每小时旋转三十度 cxt.beginPath(); cxt.moveTo(0,-130); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //绘制分针 cxt.save(); cxt.strokeStyle="#ffff00"; cxt.lineWidth="5"; //设置原点 cxt.translate(250,250); cxt.rotate(min*6*Math.PI/180);//每分钟旋转6° cxt.beginPath(); cxt.moveTo(0,-150); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //绘制秒针 cxt.save(); cxt.strokeStyle="#f00"; cxt.lineWidth="3"; //设置原点 cxt.translate(250,250); cxt.rotate(sec*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); // cxt.restore(); //美化表盘 中间小圆 cxt.beginPath(); cxt.arc(0,0,7,0,Math.PI*2); cxt.fillStyle="#ffff00"; cxt.fill(); cxt.strokeStyle="#ff0000"; cxt.stroke(); cxt.closePath(); //秒针上的小圆 cxt.beginPath(); cxt.arc(0,-140,7,0,Math.PI*2); cxt.fillStyle="#ffff00"; cxt.fill(); cxt.strokeStyle="#ff0000"; cxt.stroke(); cxt.closePath(); cxt.restore(); } drawClock(); setInterval(drawClock,1000);
效果：
getContext()
getContext() 方法返回一个用于在画布上绘图的环境。
clearRect
clearRect清空画布
drawImage
HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
dx和dy是image在canvas中定位的坐标值
dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值
sx和sy是image所要绘制的起始位置
sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值
beginPath()
beginPath() 其实就是告诉画布：“我要开始画草稿了，请把之前的草稿都清除掉。”是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。如果路径没有了，那么我们的stroke()和fill()就无法起作用
arc
arc arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);六个参数对应的意思：
x,y表示圆心坐标
r 表示圆的半径
sAngle : 表示开始绘制的角度
eAngle : 表示结束绘制的角度
counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，true = 逆时针，默认值是false
stroke()
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
closePath（）
结束路径
clip剪切
clip()使用
Canvas中的clip()方法是裁切区可用于限制图像描绘的区域，具体的用法：
使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域
使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区
save和restore
save():保存当前的绘图状态。
restore():恢复之前保存的绘图状态。
moveTo
moveTo() 方法把路径移动到画布中的指定点，不创建线条。
ineTo
ineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
