使用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() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。