html5中的canvas

canvas

<canvas width="600" height="400" style="border: 1px solid #ccc"></canvas>

1.<canvas>标签只是图形容器，你必须使用脚本来绘制图形，有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素，往往需要擦掉绘图重新绘制它。大多数canvas绘图API都是定义在通过画布的getContext()方法获取的一个"绘图环境"对象上。
 

var context = document.querySelector('canvas').getContext('2d');
//绘制线段，有closePath（）整个变成一个封闭的图形。
context.beginPath();
context.moveTo(10,200);
context.lineTo(100,250);
context.lineTo(100,500);
context.closePath();
context.strokeStyle="#ffcc00";
context.stroke();   

　2.fillRect(x,y, width,height)方法用来绘制矩形，四个参数为矩形左上角的顶点及矩形宽高。fillStyle属性用来填充矩形颜色。

　　　strokeRect方法与fillRect方法类似，用来绘制空心矩形。

　　　clearRect方法用来清除某个矩形区域内容。你可以在已画好的矩形部分截取掉某部分。

//绘制矩形
context.fillStyle="eeeeff";
context.fillRect(0,0,400,300);
//绘制空心矩形
context.strokeRect(0,0,400,300);
//清除矩阵区域
context.clearRect(0,0,200,100);

3.绘制圆形和扇形。

           arc(x,y,radius,startAngle,endAngle,anticlockwise):radius表示半径，startAngle与endAngle则是扇形的起始角度和终止角度(用弧度表示)，anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

//绘制实心的圆。
context.beginPath();
context.fillStyle="#ff0000";
context.arc(100,100,30,5,Math.PI*1,true);
context.fill();
//绘制空心圆
 context.beginPath();
 context.arc(60,60,10,0,Math.PI*1,true);
 context.strokeStyle="#ff0000";
 context.stroke();

4.绘制文本

　　fillText(string,x,y)用来绘制文本，它的三个参数分别为文本内容，起点的X,Y坐标，使用前需要先用font设置字体,大小,样式。

　　strokeText()方法用来添加空心文字。

//设置字体。
context.font="Bold 10px Arial";
context.textAligh="left";
context.fillStyle="red";
context.fillText("Hell0!",10,50);
//绘制空心字体
context.strokeText("Hello!",10,100);
context.stroke();

5.读取canvas内容，getImageData(), putImageData()

getImageData方法可以用来读取Canvas的内容，返回一个对象，包含了每个像素的信息。返回的对象包含一个data属性，它的值是一个一维数组。该数组的值，依次是每个像素的红、绿、蓝、alpha通道值。该数组可读可写。
修改这个数组后，使用putImageData方法将数组内容重新绘制在Canvas上。