HTML5自学笔记[ 11 ]canvas绘图基础1

html5新增<canvas>标签用于绘制图像，默认宽高是300*150，canvas的宽高需要在这里设置，在css中设置会有问题:设置的形状，如矩形，会等比缩放，而非设置的宽高。

在不支持canvas的浏览器里会显示这行文字，这里的文字颜色要和canvas背景色一致才行：

 <canvas id="canvas1" width="1000" height="1000">
     <span>该浏览器不支持canvas</span>
 </canvas>

在canvas画布上绘制图像，必须借助JavaScript脚本，JavaScript提供了绘制图像的接口和一系列方法：

 var oCanvas = document.getElementById('canvas1');
 var oContext = oCanvas.getContext('2d');    //获取绘图的2d环境

绘制填充的矩形，默认填充黑色，参数：矩形左上角x坐标、矩形左上角y坐标、矩形宽、矩形高；绘制一个顶点为(50,20)宽为100，高为50的矩形如下：

 oContext.fillRect(50,20,100,50);

绘制边框矩形，默认边框色为黑色，边框宽度为1px；参数和填充矩形一样；例如下：

 oContext.strokeRect(50,20,100,50);

注：实际浏览器显示的边框为2px，若要显示1px，就要将起点坐标偏移0.5px；例如下：

 oContext.strokeRect(50.5,20.5,100,50);

绘制路径所需的方法：

1. beginPath() --> 准备开始绘制，如果不写这个方法，就会出问题
2. moveTo(x1,y1) --> 画笔移动到起始点
3. lineTo(xn,yn) --> 画笔移动到第二个点，多次使用这个方法，可绘制多边形
4. closePath() --> 闭合路径，即：将画笔从(xn,yn)移动到起始点，若不写，多边形不闭合
5. stroke() --> 绘制若干直线，依次连接(x1,y1)、(x2,y2)...、(xn,yn)
6. fill() --> 填充多边形
7. fillStyle --> 填充色
8. strokeStyle --> 边框颜色
9. lineWidth --> 边框线宽

例1.绘制一个任意三角形，不填充：

 oContext.beginPath();
2 oContext.moveTo(100,50);
3 oContext.lineTo(50,100);
4 oContext.lineTo(200,100);
5 oContext.closePath();
6 oContext.stroke();

例2.绘制一个四边形，填充红色：

 oContext.beginPath();
 oContext.moveTo(100,50);
 oContext.lineTo(50,100);
 oContext.lineTo(200,100);
 oContext.lineTo(300,50);
 oContext.closePath();
 oContext.fillStyle = 'red';
 oContext.fill();

例3.绘制两条直线：

 oContext.beginPath();
 oContext.moveTo(100,50);
 oContext.lineTo(50,100);
 oContext.lineTo(200,100);
 oContext.stroke();

clearRect：该方法用于清除画布中指定矩形区域内的图形，参数：x/y/w/h：

 oContext.clearRct(0,0,oCanvas.width,oCanvas.height);

前面说过，如果不写beginPath就会出问题，看下面的例子：

画两个三角形，第一个仅画边框，第二个填充颜色，正确写法如下：

 oContext.beginPath();
 oContext.moveTo(100,50);
 oContext.lineTo(50,100);
 oContext.lineTo(200,100);
 oContext.closePath();
 oContext.stroke();

 oContext.beginPath();
 oContext.moveTo(100,150);
 oContext.lineTo(50,200);
 oContext.lineTo(200,200);
 oContext.closePath();
 oContext.fill();    

但是如果第二个不写beginPath，那么fill就找不到第二个三角形的起始点，因此会连同前面的形状一起填充：

 oContext.beginPath();
 oContext.moveTo(100,50);
 oContext.lineTo(50,100);
 oContext.lineTo(200,100);
 oContext.closePath();
 oContext.stroke();

 oContext.moveTo(100,150);
 oContext.lineTo(50,200);
 oContext.lineTo(200,200);
 oContext.closePath();
 oContext.fill();

如果在绘制第一个三角形前设置填充色,就会作用于后面的每一个填充，如果只想让该设置只作用于第一个形状，那么应该先保存路径save并在开始第二个路径前恢复路径restore：

 oContext.save();
 oContext.fillStyle = 'red';
 oContext.beginPath();
 oContext.moveTo(100,50);
 oContext.lineTo(50,100);
 oContext.lineTo(200,100);
 oContext.closePath();
 oContext.fill();
 oContext.restore();

 oContext.beginPath();
 oContext.moveTo(100,150);
 oContext.lineTo(50,200);
 oContext.lineTo(200,200);
 oContext.closePath();
 oContext.fill();