H5-canvas

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

H5-canvas

基本用法

推荐阅读更多精彩内容