【JS红宝书学习】15使用Canvas绘图

canvas是html5中的新功能，并且canvas还建议了一个WebGL的3D上下文。主流浏览器基本都支持。Windows XP本身缺少必要的绘图驱动程序，因此不可以使用canvas。
1、canvas元素
canvas的使用原理是先在html中声明一个canvas元素，然后在这个元素所占区域（使用width和height属性指定）中进行绘制。
canvas可以使用id来标识自身，也可被css选择器选择后进行调整。
基本使用方法，创建一个canvas元素，获取这个canvas元素，获取二维上下文。

<canvas id="drawing" width="500" height="500">
NOT support canvas
</canvas>

<script>
    var drawing = document.getElementById("drawing");
    if(drawing.getContext){//检测是否支持canvas
        var context = drawing.getContext("2d");
        //开始创作
    }
</script>

如果希望导出图像，可以使用toDataURL(“image/png”);

<canvas id="drawing" width="500" height="500">
NOT support canvas
</canvas>

<script>
    var drawing = document.getElementById("drawing");
    if(drawing.getContext){//检测是否支持canvas
        var context = drawing.getContext("2d");
        context.fillRect(10,10,50,50);
        //获得图片URI
        var imgURI = drawing.toDataURL("image/png");
        //显示图像
        var image = document.createElement("img");
        image.src = imgURI;
        document.body.appendChild(image);
    }
</script>

以上代码则会出现两个矩形其中一个是canvas画出来的，一个是canvas导出的图片并插入到DOM中。

2、2d上下文
2d上下文的坐标开始于左上角，原点坐标是（0，0），所有坐标值都是基于这个远点计算的，x越大表示越靠右，y越大表示越靠下。width和height实际上也声明了水平和垂直两个方向上的可用像素。
①填充和描边
填充 context.fill();
描边 .context.stroke();
颜色取决于 fillStyle 和 ** strokeStyle** 两个属性。颜色可用颜色名、十六进制码、rgb、rgba、hsl、hsla、渐变对象 。
②绘制矩形
使用 fillRect(x,y,w,h)
四个参数分别是起始横坐标、起始纵坐标、宽度、高度。
clearRect(x,y,w,h) 函数用于清除画布上的指定矩形区域，参数列表相同。
③绘制路径
arc(x,y,radius,startAngle,endAngle,couterclockwise) 以x，y为圆心绘制弧线，弧线半径为radius，起始角度和结束角度（用弧度表示）分别为startAngle、endAngle，couterclockwise表示是否按照逆时针方向计算。
arcTo(x1,y1,x2,y2,radius) 从上一点开始绘制一个弧线，到(x2，y2)为止，并且以给定半径radius穿过（x1,y1）。

besizerCurveTo(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)开始绘制一个矩形路径，宽度和高度由width和height指定，注意这里画的是路径而非fill和stroke绘制的形状。

在这里插入代码片④绘制路径后可能的操作
closePath() 直接连接一条直线回到路径起点
如果路径已经闭合
stroke() 为路径圈出的形状绘制边框，fill() 为路径圈出的形状填充颜色。
clip() 为路径圈出的形状做剪切操作。
还有一个用于判断点是否在路径上的函数 isPointInPath(x,y) context.isPointInPath(100,100)
示例：绘制一个不含时刻的表盘

<canvas id="drawing" width="500" height="500">
NOT support canvas
</canvas>
<script>
    var drawing = document.getElementById("drawing");
    if(drawing.getContext){//检测是否支持canvas
        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();//绘制
    }
</script>

④绘制文本
需要用到的属性：
font :表示文本样式、大小、字体，使用css的格式来指定，比如“bold 14px Arial”
textAlign ：表示文本对齐方式，可选start、end、left、right、center
textBaseline ：文本基线，可选top、hanging、middle、alphabetic、ideographic、bottom
如果需要绘制文本可以选择边框型和填充型
strokeText(string,x,y)
fillText(string,x,y)
绘制文本前还可以使用measureText() 来获取即将绘制文本的信息，是一个TextMetrics对象，目前只有一个width对象。
比如context.measureText(“hello world”).width可以获取即将绘制的文本的宽度，这个宽度是根据字符串、字体、对齐方式、文本基线来共同计算的。

⑤变换
变换图像的方法：
rotate(angle) ：围绕原点旋转图像angle弧度
scale(scaleX,scaleY) ：在x轴上乘scaleX，在y轴上乘scaleY。
translate(x,y) ：将坐标原点移动到(x,y)。

⑥状态保存
save() 将当前状态（style什么的）保存到一个栈中
restore() 将最近保存的一个状态出栈

⑦绘制图像
最简单的就是对img元素进行绘制
最开始要先从document对象中获得这个img元素。
var image = document.images[0];
使用drawImage方法进行绘制
drawImage(image,x,y) 将元素左上角对齐到坐标上
drawImage(image,x,y,w,h) 在上一个方法的基础上设置宽高
drawImage(image,x,y,w,h,ox,oy,ow,oh) x、y、w、h截取了图像，ox、oy、ow、oh设置了目标元素x,y,w,h，相当于截取了图像的一部分然后重新绘制到目标位置。
当然，第一个参数也可以是一个画好的canvas对象。
最后可以使用toDataURL方法（但要注意这个不是context对象的方法），要注意的是导出的图像不能来自其他的域。

⑧阴影
shadowColor ：用CSS颜色格式表示的阴影颜色。
shadowOffsetX ：形状或路径x轴方向的阴影偏移量。
shadowOffsetY
shadowBlur：模糊的像素数，默认为0，即不模糊

⑨渐变
createLinearGradient(x1,y1,x2,y2): 创建一个矩形渐变对象
addColorStop(index,color)： 第一个参数介于0-1之间，表示开始颜色和结束颜色。

<canvas id="drawing" width="500" height="500">
NOT support canvas
</canvas>
<script>
    var drawing = document.getElementById("drawing");
    if(drawing.getContext){//检测是否支持canvas
        var context = drawing.getContext("2d");
        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)
    }
</script>

另一个线性渐变对象
createRectLinearGradient(context,x,y,w,h) 这个函数基于x，y，宽度，高度创建渐变对象
径向渐变对象
createRadialGradient(startX,startY,startRadius,endX,endY,endRadius) 六个参数分别为起始圆横纵坐标和半径、结束圆横纵坐标和半径。
一般来讲，径向渐变难以控制，所以会采用同心圆的方式来创建径向渐变。

⑩模式
模式就是重复的图像，可以用来填充或者描边图形。要创建一个新模式可以使用createPattern() 方法并传入两个参数：一个img/video/canvas元素和一个表示如何重复图像的字符串（repeat、repeat-x、repeat-y、no-repeat）。
var pattern = context.createPattern(image,“repeat”);
需要注意的是，模式与渐变一样 ，都是从画布的原点(0,0)开始的。将填充样式(fillstyle)设置为模式对象，指标是在某个特定的区域内显示重复的对象，而不是要从某个位置开始绘制重复的图像。

⑪使用图像数据
可以通过getImageData()取得原始图像数据。这个方法接受4个参数，要取得其数据的画面区域的x,y坐标和该区域的像素宽度高度
var imageData = context.getImageData(10,5,50,50);
返回的是ImageData对象的实例，有三个属性width、height、data
其中data是一个数组，保存着图像重每一个像素的数据，在data数组中，每一个像素用四个元素来表示，分别表示红、绿、蓝、透明度。
每四个数据表示一个像素。

var data = imageData.data;
    red = data[0];
    green = data[1];
    blue = data[2];
    alpha = data[3];

利用这个性质可以做一个色阶过滤器。

⑫合成
全局透明度 globalAlpha
globalCompositeOperation属性表示后面的图形怎样与先绘制的图形怎样结合。
可选值：
source-over（默认值）：后绘制的图形位于先绘制的图形上方。
source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。
source-out：后绘制的图形与先绘制的图形不重叠的地方可见，先绘制的图形完全透明。
source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。
destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。
destination-out：后绘制的图形擦除与先绘制的图形重叠的部分。
destination-atop：后绘制的图形位于先绘制的图形下方，在不重叠的地方，新绘制的图形会变透明。
lighter：后绘制的图形与先绘制的图形重叠部分的值象家，使该部分变亮。
copy：后绘制的图形完全替代与之重叠的先绘制图形。
xor：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

3、WebGL（相当于3d上下文）