Canvas绘图

Canvas负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。
Canvas的基本用法：

html代码
<canvas id="drawing"  width="200" height="200">A drawing of something.</canvas>
//如果浏览器不支持元素，就会显示上面标签里面的内容
javascript代码
var drawing=document.getElementById("drawing");
//确定浏览器支持元素
if(drawing.getContext){
	//var context=drawing.getContext("2d");
	//取得图像的数据URI
	var imgURI=drawing.toDataURL("image/png");
	//显示图像
	var image=docuemnt.createElement("img");
	image.src=imgURI;
    document.body.appendChild(image);
}

使用2D绘图上下文提供方法，可以绘制简单的2D图形，比如矩形、弧线和路径。2D上下文的坐标开始于元素的左上角，原点坐标是(0,0).所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。默认情况下，width和height表示水平和垂直方向上可用的像素数目。
2D上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle和strokeStyle。
这两个属性的值可以是字符串、渐变对象或模式对象，而且他们默认值都是“#000000”。如果为他们指定表示颜色或字符串的值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、rgba、hsl和hsla。

html代码
<canvas id="drawing"  width="200" height="200">A drawing of something.</canvas>
//如果浏览器不支持元素，就会显示上面标签里面的内容
javascript代码
var drawing=document.getElementById("drawing");
//确定浏览器支持元素
if(drawing.getContext){
	var context=drawing.getContext("2d");
	//context.strokeStyle="red";
	context.fillStyle="##ff0000";
	//绘制红色矩形
	context.fillStyle="##ff0000";//也可以用描边strokeStyle
	context.fillRect(10,10,50,50);//四个值分别为x坐标点有坐标点宽度高度
	//绘制半透明的蓝色矩形
	context.fillStyle="rgba(0,0,255,0.5)";
	context.fillRect(30,30,50,50);
	//在两个矩形重叠的地方清除一个小矩形
	context.clearRect(40,40,10,10);
}
//所有涉及描边和填充的操作都将使用者两个样式，直至重新设置这两个值。

上述效果图

绘制路径
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。然后，再通过下列方法来实际地绘制路径。
（1）arc(x,y,radius,startAngle,endAngle,counterclockwise)以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧线表示）分别为startAngle和endAngle，最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针计算。
（2）arcTo(x1,x2,y1,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius穿过(x1,y1).
（3）bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)和(c2x,c2y)为控制点。
（4）lineTo(x,y):从上一点开始绘制一条直线，到（x,y）.
（5）moveTo(x,y):将绘图游标移动到(x,y),不画线。
（6）quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且以（cx，cy）作为控制点。
（7）rect(x,y,width,height):从(x,y)开始绘制一个矩形，宽度和高度分别由width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。
创建了路径之后，接下来有几种选择。如果想绘制一条连接到起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clicp(),这个方法可以在路径上创建一个剪切区域。
绘制一个不带数字的时钟表盘：

html代码
<canvas id="drawing"  width="200" height="200">A drawing of something.</canvas>
//如果浏览器不支持元素，就会显示上面标签里面的内容
javascript代码
var drawing=document.getElementById("drawing");
//确定浏览器支持元素
if(drawing.getContext){
	var context=drawing.getContext("2d");
	context.beginPath();
	context.arc(100,100,99,0,2*Math.PI,false);
	context.moveTo(194,100);
	context.arc(100,100,94,0,2*Math.PI,false);
	context.moveTo(100,100);
	context.lineTo(100,15);
	context.moveTo(100,100);
	context.lineTo(35,100);
	context.stroke();
}

效果图如下：

绘制文本：绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且，这两个方法都有以下属性：
font:表示文本样式、大小及字体，用css指定样式来指定
textAlign:表示文本的对齐方式
textBaseline：表示文本的基线

context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",100,20);

变化
(1)rotate(angle)：围绕原点旋转的图像angle弧度。
(2)scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX,在y方向乘以scaleY。两个的默认值都是1.
(3)translate(x,y):将坐标原点移到(x,y)。
绘制图像
最简单的调用方法是传入一个HTML元素。

var image=document.images[0];
context.drawImage(image,10,10);//第二个和第三个参数为绘制该图像的起点的x和y坐标。
context.drawImage(image,50,10,20,30);//第四个和第五个参数是绘制图像的宽度和高度
context.drawImage(image,0,10,50,50,0,100,40,60);//数值前四个源图像的信息，后四个目标图像的信息

阴影
2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
shadowColor:用css颜色格式表示的阴影颜色，默认值为黑色
shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认值为0
shadowOffsetY:形状或路径有轴方向的阴影偏移量，默认值为0
shadowBlur：模糊的像素数，默认0，即不模糊

context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=4;
context.shadowColor="rgba(0,0,0,0.5)";

渐变

var gradient=context.createLinearGradient(30,30,70,70);//前两个数渐变的起点，后两个数渐变的终点
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);

上述渐变图的矩形的起点位于渐变的中间位置。
可以通过以下函数调整坐标的位置

function createRectLinearGradient(context,x,y,width,height){
	return context.createLinearGradient(x,y,x+width,y+height);
}
var gradient=createRectLinearGradient(context,30,30,50,50);//前两个数渐变的起点，后两个数渐变的终点
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);

var gradient=context.createRadialGradient(55,55,10,55,55,30);//前三个参数指定起点的原点和半径后三个参数指定终点的圆心和半径
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient;
context.fillRect(30,30,50,50);

模式
第二个参数的值与css的background-repeat属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”

var image=document.image[0],
	pattern=context.createPattern(image,"repeat");
context.fillStyle=pattern;
context.fillRect(10,10,150,150);

合成

context.fillStyle="#ff0000";
context.fillRect(10,10,50,50);
context.globalAlpha=0.5;
context.fillStyle="rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
context.globalAlpha=0;

例子中把蓝色矩形绘制到了红色矩形上面。因为在绘制蓝色矩形前，globalAlpha已经被设置为0.5；所以蓝色矩形会呈现半透明效果，透过它可以看到下面的红色矩形。

context.fillStyle="#ff0000";
context.fillRect(10,10,50,50);
context.globalCompositeOperation="destination-over";
context.fillStyle="rgba(0,0,255,1)";
context.fillRect(30,30,50,50);

红色矩形在蓝色矩形上面。
WebGL
WebGL是针对Canvas的3D上下文。WebGL涉及复杂计算需要提前知道数值的精度。

var drawing=document.getElementById("drawing");
//确定浏览器支持元素
if(drawing.getContext){
	var gl=drawing.getContext("experimental-webgl");
	if(gl){
		//使用WebGL		
	}
}

通过给getContext()传递第二个参数，可以为WebGL上下文设置一些选项。这个参数本身是一个对象，可以包含下列属性：
alpha:值为true，表示为上下文创建一个Aplha通道缓冲区；默认值为true。
depth：值为true，表示可以使用16位深缓冲区；默认值为true。
stencil：值为true，表示使用8位模板缓冲区；默认值为false。
antialias：值为true，表示将使用默认机制执行抗拒齿操作；默认值为true；
premutipliedAlpha：值为true，表示绘图缓冲区有预成Alpha值；默认值为true
preserveDrawingBuffer:值为true，表示在绘图完成后保留绘图缓冲区；默认值为false。
建议确实需要的情况下再开启这个值，因为可能影响性能。

var drawing=document.getElementById("drawing");
//确定浏览器支持元素
if(drawing.getContext){
	var gl=drawing.getContext("experimental-webgl",{alpha：false});
	if(gl){
		//使用WebGL		
	}
}

如果getContext()无法创建WebGL上下文，有的浏览器会抛出错误。为此，最好把调用封装到一个try-catch块中。

var drawing=document.getElementById("drawing"),gl;
//确定浏览器支持元素
if(drawing.getContext){
	try{
		gl=drawing.getContext("experimental-webgl");
	}catch(ex){
		//什么也不做
	}
	if(gl){
		//使用WebGL		
	}else{
		console.log("WebGL context could not be created.")
	}
}