js高级程序设计笔记10--canvas绘图

要使用元素，必须先设置width和height属性，指定可以绘图的区域大小。

<canvas id=‘drawing" width="200" height="200">a drawing of something</canvas>

要在canvas上画图，要取得绘图上下文：getContext(上下文的名字)。传入“2d”则获得2D上下文。

var drawing = document.getElementById("drawing");
//确认浏览器支持canvas元素
if(drawing.getContext){
var context = drwaing.getContext("2d");
}

使用toDataURL()方法可以导出元素上绘制的图像。接受一个参数：图像的MIME类型格式。取得画布中一幅PNG格式的图像。

var imgURI = drawing.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

2D上下文

2D上下文的坐标始于元素的左上角，原点坐标是(0,0)。

填充和描边

两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串，渐变对象或模式对象，他们的默认值都是“#000000”。如果是颜色可以使用CSS中颜色值的任何格式。

var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";

绘制矩形

fillRect():填充矩形，填充的颜色由fillStyle属性指定。

strokeRect():绘制的矩形用指定的颜色描边。颜色由strokeStyle属性指定.描边线条的宽度由lineWidth属性控制，可以是任意整数。lineCap属性可以控制线条末端的形状是平头，圆头，还是方头。(“butt”,”round”,”square”),lineJoin属性可以控制线条相交的方式是圆交，斜交，斜接(“round”,”bevel”,”miter”)

clearRect():清楚画布上的矩形区域。

这三个方法都接受4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和高度。单位都是像素。

var context = drawing.getContext("2d");
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
context.clearRect(40,40,10,10);
context.strokeStyle = "#ff0000";
context.strokeRect(20,20,50,50);
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(40,40,50,50);

绘制路径

要绘制路径，首先调用beginPath()方法，然后再调用下列方法绘制路径：

arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y)为圆心绘制一条弧线，半径为radi
4000
us，起始和结束角度，是否按逆时针方向计算角度。

arcTo(x1,y1,x2,y2,radius):从上一点到（x2,y2)画一条弧线，并且以给定的半径radius穿过(x1,y1).

bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点绘制一条曲线，到(x,y)为止，并且以(c1x,c1y),(c2x,c2y)为控制点。

lineTo(x,y):从上一点绘制一条直线。到(x,y)。

moveTo(x,y):将绘图游标移动到(x,y)，不划线。

quadraticCruveTo(cx,cy,x,y):从上一点绘制一条二次曲线，到（x,y)为止，以(cx,cy)为控制点。

rect(x,y,width,height):从点(x,y)绘制一个矩形。

创建路径后，可调用以下方法：

1. closePath():绘制一条连接到路径起点的线条。

2. fill()：填充

3. stroke()：描边

4. clip()：在路径上创建一个剪切区域。

绘制一个时钟

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

isPointInPath(x,y):确定（x,y)在不在路径上。

绘制文本

fillText():

strokeText():

这两个方法都接受4个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素高度。而且这两个方法都以3个属性为基础：

font:表示文本样式，大小及字体。

textAlign:文本对齐方式。可取的值：start,end,left,right,center.建议使用start和end。因为这两个能同时适合从左到右和从右到左显示的语言。

textBaseline:文本的基线。可取的值：top,hanging,middle,alphabetic,ideographic,bottom.

这几个属性都有默认值。

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

变换

rotate(angle):围绕原点旋转图像angle弧度。

scale(scaleX,scaleY):缩放图像，在x方向上乘以scaleX,在Y方向上乘以scaleY.

translate(x,y):将坐标原点移动到(x,y).

transform(m1_1,m1_2,m2_1,m2_2,dx,dy):直接修改变换矩阵，方式是乘以如下矩阵：

m1_1 m1_2 dx

m2_1 m2_2 dy

0 0 1

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy):将变换矩阵重置为默认状态，然后再调用transform（）.

还有两个方法需要注意（可以多次调用）：

save():对绘图上下文的设置进行保存。以便将来会用到。(保存在一个栈结构中)

restore()：一级级恢复上下文的设置。即context回到save()之前的状态。

绘制图像

drawImage():把一幅图像绘制到画布上。

三种不同的调用方式：

传入一个元素，绘制图像起点的x,y坐标。

var image = document.images[0];
context.drawImage(image,10,10);

还可以再传两个参数：目标宽度，目标高度。以此来缩放图像。

context.drawImage(image,10,10,20,30);

第三种调用方式传入9个参数：要绘制的图像，源图像的x坐标，源图像的y坐标,源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度。

注:除了给drawImage（）方法传入元素外，还可以传入另一个元素作为其第一个参数。这样就可以把另一个画布内容绘制到当前画布上。

阴影

2D上下文会根据以下几个属性自动为形状或路径绘制出阴影：

shadowColor:用Css颜色格式表示的阴影颜色，默认为黑色。

shadowOffsetX:形状或路径x轴的阴影偏移量，默认为0.

shadowOffsetY:形状或路径ya轴的阴影偏移量，默认为0.

shadowBlur:模糊的像素数，默认为0，及不模糊。

var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = "rgba(0, 0, 0, 0.5)";

context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);

渐变

渐变由CanvasGradient实例表示。通过2D上下文来创建和修改：

createLinearGradient():创建一个新的线性渐变。4个参数：起点的x，y坐标，终点的x,y坐标。返回CanvasGradient实例。

创建完后，使用addColorStop():指定色标。两个参数：色标位置（0-1）和CSS颜色值。

var context = drawing.getContext("2d"),
gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

也可以创建径向渐变：createRadialGradient():6个参数：对应着两个圆的圆心和半径。前三个是起点圆的圆心和半径，后三个是终点圆的。

gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);

模式

其实就是重复的图像，可以用来填充或描边图形。

createPattern():2个参数，一个元素和一个表示如何重复图像的字符串，（repeat,repate-x,repeat-y,no-repeat)

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

createPattern()的第一个参数可以是元素或另一个元素。

使用图像数据

getImageData():取得原始图像数据。4个参数，要取得其数据的画面区域的x，y坐标以及该区域的像素宽度和高度。

返回一个ImageData的实例。每个ImageData对象有三个属性。width,height和data（一个数组，保存着图像中每个像素的数据，每个像素用4个元素保存，红，绿，蓝，透明度）

var imageData = context.getImageData(10,5,50,50);
var data = imageData.data,
red = data[0],
green = data[1],
blue = data[2],
alpha = data[3];

putImageData(ImageData，x,y):方法把图像数据绘制到画布上。

合成

globalAlpah:介于0-1的值，用于指定所有绘制的透明度。

globalCompositionOperation:表示后绘制的图形怎样与先绘制的图形结合。可能的值如下：

source-over(默认值)：后绘制的图形位于先绘制图形的上方。

source-in:两者重叠的部分可见，其他部分完全透明。

source-out:后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。

source-atop:后绘制的图形与先绘制的图形重叠的部分可见,先绘制的图形不受影响。

destination-over:后绘制的图形位于先绘制图形的下方，只有之前透明像素下的部分才可见。

destination-in:后绘制的图形位于先绘制图形的下方，两者不重叠的部分完全透明。

destination-out:后绘制的图形擦除与先绘制图形重叠的部分。

destination-atop:后绘制的图形位于先绘制图形的下方,在两者不重叠的地方，先绘制的图形变透明。

lighter:后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。

copy:后绘制的图形完全取代与之重叠的先绘制图形。

xor:后绘制的图形与先绘制的图形重叠部分执行“异或”操作。

WebGL

针对Canvas的3D上下文

类型化数组

webGL涉及的复杂计算需要提前知道数值的精度，而js数值无法满足需要。因此webGL引进了类型化数组。（其元素被设置为特性类型的值）

ArrayBuffer:该对象表示的是内存中指定的字节数。但不会指定这些字节用于保存什么类型的数据。

var buffer = new ArrayBuffer(20);
var bytes = buffer.byteLength;//20

后续补上