canvas是H5非常受欢迎的功能,利用<canvas>标签在页面中设定一个区域,然后就可以在这个区域中绘制图形
基本用法
- 首先引入
<canvas>,并且就相当与一块画布,首先我们要指定画布的大小,即就是width和height
<canvas width="400px" height="400px" id="ca"></canvas> - 要在这块画布上画图,,需要取得绘图上下文,调用
getContext()方法并传入参数'2d',需要先检测浏览器是否支持getContext()方法
var ca = document.getElementById('ca');
if(ca.getContext){
var context = ca1.getContext('2d');
}
- 最后我们就可以使用一些方法进行绘图啦
2d上下文的两种基本绘图操作是填充和描边
常见的绘制图形的方法 -
fillRect():描边矩形,四个参数,x,y坐标,矩形的长宽 -
strokeRect():填充矩形,参数同上 -
clearRect():清除画布上的矩形区域 -
arc(x,y,radius,startAngle,endAngle,counterclockwise):以(x,y)为圆心画半径为radius的弧线,起始角度,结束角度,最后一个参数表示角度是否按照逆时针方向计算 -
arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条曲线,到(x2,y2)为止,并且以指定的半径穿过(x1,y1); -
lineTo(x,y):从上一点开始绘制一条线,到(x,y)为止 -
moveTo(x,y):将绘图游标移动到(x,y),不画线 -
fillText():绘制文本,接收四个参数,要绘制的文本字符串,x坐标,y坐标,和可选的最大像素宽度 -
strokeText():绘制文本,参数同上 -
drawImage():绘制图像,最简单的参数组合方式是传入一个HTML<img>元素,以及绘制该图像起点的横纵坐标
写些小demo练习练习
var canvas = document.getElementById('ca');
if(canvas.getContext){
var context = canvas.getContext('2d');
var context = canvas.getContext('2d');
}
//绘制两个矩形
context.fillStyle = 'red';
context.fillRect(10,10,20,20);
context.strokeStyle = 'black';
context.strokeRect(40,10,20,20);
//绘制一个钟表
context.beginPath();
context.arc(50,100,50,0,2*Math.PI,false);//绘制外圆
context.moveTo(96,100);//将绘图游标移到内圆的起点位置
context.arc(50,100,46,0,2*Math.PI,false);//绘制内园
context.moveTo(50,100);//将游标移动到圆心位置
context.lineTo(50,60);//绘制分针
context.moveTo(50,100);//将游标移到圆心位置
context.lineTo(18,100);//绘制时针
//开始绘制钟表上的时间文本
context.textBaseline = 'middle';
context.textAlign = 'center';
context.font = 'blod 10px Arial';
context.fillStyle = 'black';
context.fillText('9',10,100);
context.fillText('12',50,60);
context.fillText('3',90,100);
context.fillText('6',50,140);
context.stroke();
