JavaScript  使用Canvas绘图

    <canvas>元素负责在页面中设定一个区域，可以通过JavaScript动态地在这区域中绘制图形。

一、基本用法

1、先设置width和height来指定绘图区域大小，默认是透明的。需用getContext()方法获得绘图上下文。

if(drawing.getcontext){    //检测浏览器是否支持canvas元素
    var context=drawing.getContext("2d");    //获取2D上下文对象
}

2、使用toDataURL()方法可获取绘制的图像，参数为图像的MIME类型各式。

var imgURL=drawing.toDataURL("image/png");

二、2D上下文

1、填充和描边

填充使用fillStyle属性，描边使用strokeStyle属性，属性的值（默认为"#000000"）可以是字符串、渐变对象或模式对象。

context.strokeStyle="red";     //红色描边
context.fillStyle="#0000ff";   //蓝色填充

2、绘制矩形

fillRect()方法——有填充的矩形，颜色通过fillStyle属性设置，通过rgba()格式可设置填充透明度，

strokeRect()方法——有边框的矩形，颜色通过fillStyle属性设置，

clearRect()方法用于清除画布上的矩形区域，

常用这三个方法绘制矩形，且他们都有4个参数（x,y,width,height）。

描边线宽由lineWidth属性控制（值为整数）

线条末端形状由lineCap属性控制（值：butt平头、round圆头、square方头）

线条相交的方式由lineJoin属性控制（值：round圆交、bevel斜交、miter斜接）

context.fillStyle="ff0000";      //矩形填充为红色
context.fillRect(10,10,50,50);   //在（10,10）坐标，添加以宽50,高50，颜色填充的矩形
context.fillStyle="rgba(0,0,255,0.5)";    //设置矩形为蓝色，50%透明度
context.clearRect(40,40,10,10);    //在（40,40）坐标设置宽高为10的透明矩形

3、绘制路径

    2D绘制可通过路径创造出复杂的形状和线条。首先调用beginPath()方法开始绘制新路径。然后，再通过调用下列方法创建路径：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)为圆心，半径radius，起始和结束角度，counterclockwise按逆时针旋转为true。

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)，不画线。

quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x, y)为 止，并且以(cx, cy)作为控制点。

rect(x, y, width, height)：从点(x, y)开始，设置矩形宽高，这个方法绘制的是矩形路径。

调用closePath()可以绘制一条连接到路径起点的线条。

可以调用fill()方法，使用用 fillStyle填充它。

可以调用stroke()方法对路径描边，描边使用的是strokeStyle。

可以调用clip()方法在路径上创建一个剪切区域。 

context.arc(100,100,99,0,2*Math.PI,false);  //以(100,100)为圆心，半径99，画一个圆
context.moveTo(100,100);     //将坐标移动到(100,100)
context.lineTo(100,15);      //画一条从(100,100)到(100,15)的直线
context.stroke();     //描边路径

isPointInPath()可以在路径被关闭之前确定画布上的某一点是否位于路径上。

4、绘制文本

    fillText()方法使用fillStyle属性绘制文本，strokeText()方法使用strokeStyle属性描边文本，他们接收4个参数：文本字符串、x,y坐标和最大像素宽度。且都有以下列3个属性，基本与CSS相同

font：文本样式、大小及字体，同CSS

textAlign：文本对齐方式。值有"start"、"end"、"left"、"right"和"center"。 建议使用"start：x坐标为文本起点"和"end"

textBaseline：文本的基线。值有"top：y坐标为文本顶端"、"hanging"、"middle"、"alphabetic"

context.font="bold 16px Arial";    //粗体，16px大小，Arial字体
context.textAlign="center";      //x在文本中间（居中对齐）
context("大家好",100,20);        //在（100,20）写入：大家好

可以使用measureText()方法输出文本的宽度，参数为要计算的文本字符。

var textwidth = context.measureText("Hello!").width;   //测量Hello！文本的宽度px

5、变换

    通过上下文的变换可将处理后的图像绘制到画布上。使用不同的变换矩阵产生不同的结果。 可以通过如下方法来修改变换矩阵。
rotate(angle)：围绕原点旋转图像angle弧度。

scale(scaleX, scaleY)：以倍数缩放图像

translate(x, y)：将坐标原点移动到(x, y)。

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

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

调用save()可以把设置保存到栈结构中，调用restore()方法回到之前保存的设置。

6、绘制图像

    使用 drawImage()方法可以把一幅图像绘制到画布上，可以通过以下三种方式。

context.drawImage(document.images[0],10,10);   //将第一张图传到画布上，起点为（10,10）
context.drawImage(document.images[0],50,10,20,30); //起点为（50,10），大小为20*30像素
context.drawImage(image,0,0,30,30,40,0,15,15); //剪切图像，并在画布上定位被剪切的部分

    剪切图像的方法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

    此方法参数按顺序为：剪切起点（sx,sy）   被剪宽高    将图片放在（x,y）    图片宽高

7、阴影

   以下几个context的属性可设置形状或路径的阴影

shadowColor：用CSS颜色格式表示的阴影颜色，默认为黑色

shadowOffsetX：x轴方向的阴影偏移量，默认为0

shadowOffsetY：y轴方向 的阴影偏移量，默认为0

shadowBlur：模糊的像素数，默认 0，即不模糊。 

context.shadowOffsetX=2;    //X方向阴影为2px
context.shadowOffsetY=2;    //y方向阴影为2px
context.shadowBlur=1;       //模糊值为1
context.shadowColor="rgba(0,0,0,0.2)"    //透明度为20%的黑色阴影

8、渐变

1、用createLinearGradient()方法创建一个新的线性渐变，参数为：起点（x,y）和终点（x,y）

   使用 addColorStop()方法指定色标：参数为①色标（0~1）  ②颜色

var gradient = context.createLinearGradient(30,30,50,50);  //从（30,30）到（50,50）填充
gradient.addColorStop(0,"white");  //起点颜色为白色
gradient.addColorStop(1,"black");  //终点颜色为黑色
context.fillStyle = gradient;     //使用渐变填充

2、使用createRadialGradient()方法创建径向渐变，有6个参数，为起点坐标和圆半径、终点坐标和圆半径。

var gradient = context.createRadialGradient(30,30,10,30,30,20); //同心圆渐变

9、模式

   模式就是重复的图像，可以用来填充或描边图形。用 createPattern()方法创建一个新模式并传入两个参数：HTML <img>元素和background-repeat 属性值，包括"repeat"、"repeat-x"、"repeaty"和"no-repeat"。

    模式从（0,0）开始重复，填充样式显示的是画布某个区域的重复图像。

pattern = context.createPattern(image,"repeat"); 
context.fillStyle = pattern; 

10、使用图像数据

     通过getImageData()取得原始图像数据，参数为图像的（x,y,width,height）。返回的是ImageData对象，有三个属性：width、height和data。其中data属性是一个数组，保存着图像中每一个像素的数据。每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据就保存在数组的第0到第3个元素中

var data = imageData.data,
    red=data[0],
    green=data[1],
    blue=data[2],
    alpha=data[3];    //获取图像第一个像素的红绿蓝以及透明度

11、合成

    globalAlpha属性为设置全局透明度。

三、WebGL

    WebGL是针对Canvas的3D上下文

1、类型化数组

    类型化数组也是数组，但其元素被设置为特定类型的值。 

ArrayBuffer能在内存中分配一定数量的字节，可通过其byteLength属性获取包含的字节数

var buffer = new ArrayBuffer(20);  //分配20B内存
var bytes = buffer.byteLength;    

1、视图

用ArrayBuffer来创建数组缓冲器视图，如DataView，可节选ArrayBuffer数据段。通过其buffer属性也可以取得数组缓冲器

var view = new DataView(buffer,8,10);  //从字节8开始，到字节18结束。
view.byteOffset;    //字节偏移量8存在byteOffset中
view.byteLength;    //字节长度存在byteLength中

读写DataView时，可选用相应的getter和setter方法

getInt8()       setInt8()      getUnit8()     setUnit8()

getInt16(,)    setInt16(,)      getUnit16(,)    SetUnit16(,)     也可以是32位，或者Float32，Float64