html5 canvas 方法详解

自从canvas出现后极大的方便了网页设计者的工作，一些图形可以直接用代码来做出来，而不再需要用PS等软件辛苦作图了。今天介绍一下canvas的一系列方法。

首先，先建立一个标签：

	<canvas id="canvas1" width="900" height="900">
  		<p>canvas</p>
  	</canvas>

  <canvas>标签本身并不具备画图的能力，其本身只是为javascript提供了一个绘制图像的区域，因此画图工作需要再JavaScript中完成。

然后，获取结点对象，代码如下：

<script type="text/javascript">
		window.οnlοad=function(){
		var canvas=document.getElementById("canvas1");
		var context2D=canvas.getContext("2d");//得到二维绘制对象
</script>

getContext()方法从画布中得到二维绘制对象（传统概念中的画笔）。getContext()方法的参数”2d”即表示二维。得到的Context对象是HTML5的内建对象，其中包含了许多图形绘制和调整的方法，在JavaScript中通过操作它即可以在Canvas画布中绘制所需的图形。

1.绘制字符串：

context2D.font="30px sans-serif";//字体大小样式

context2D.fillText("helloWorld",100,35);

context2D.font用来设置字体的大小以及字体样式，
context2D.fillText（text, left,top, [maxWidth]），text是文本内容，中间两个为起始位置，最后参数是选填，为最大宽度。



2.绘制直线：

context2D.moveTo(50,50);    //指定一条线段的起点  默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。
context2D.lineTo(100,100);//指定线段终点  用于描绘一条从起点从指定位置的直线路径，描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。





3.绘制弧线：

context2D.beginPath();//清除之前的路径并提醒Context开始绘制一条新的路径，否则当调用stroke()方法的时候会绘制之前所有的路径  
context2D.strokeStyle= "#ff0000";//线条的颜色，默认为”#000000”，其值可以设置为CSS颜色值、渐变对象或者模式对象。    
context2D.moveTo(50,50);  //指定弧线起始点    
context2D.arcTo(100,100, 200, 50, 100); //
void arcTo(x1, y1, x2, y2,radius);
用于描绘一个与两条线段相切的圆弧，两条线段分别以当前Context绘制起点和(x2, y2)点为起点，都以(x1, y1)点为终点，圆弧的半径为radius。描绘完成后绘制起点会移动到以(x2, y2)为起点的线段与圆弧的切点。也就是说，以上的（50，50）和（100,100）都是起点，（200,50）为终点，且绘制完成后绘制的起点会移动到（200,50）。    
context2D.stroke(); 
4.绘制圆：

context2D.beginPath();      
context2D.strokeStyle= "#ff0000";    //线条颜色  
context2D.arc(300,250, 100, 0, Math.PI*2 , false);    //圆心，半径，起始弧度，终止弧度；0表示0度，3点钟方向，Math.PI，9点钟方向，false，顺时针注意这里的参数是弧度制，而不是角度制  
context2D.stroke(); //将上面的圆填充为灰色      
context2D.fillStyle ="#a3a3a3";   //圆形填充颜色   
context2D.fill(); //开始填充
5.绘制矩形：

context2D.fillStyle ="yellow"; 
context2D.fillRect(100,100,100, 100);//fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
context2D.beginPath();      
context2D.rect(250,200, 100, 100);//rect() 方法创建矩形。
提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

6.绘制图片：
var img= new Image();//创建一个图片类型实例
img.οnlοad=function(){
context2D.drawImage(img,0,0);	//图片，图片位置		
}
img.src="E:/图片/1.jpg";//图片的地址

以上方法需要在onload方法中才能显示 ，关于它的具体解释以及问题解决方法在此链接：http://blog.csdn.net/cuiyaoqiang/article/details/52936737



canvas的其他方法：

clip():从画布中剪切 200*120 像素的矩形区域。然后，绘制绿色矩形。只有被剪切区域内的绿色矩形部分是可见的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);