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)为圆心绘制一条弧线，半径为radius，起始和结束角度，是否按逆时针方向计算角度。
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

后续补上