使用Canvas绘图

<canvas>元素负责在页面中设定一个区域，然后通过javascript动态地在这个区域绘制图形。IE9+、Safari 2+、Firefox 1.5+、Opera 9+、Chrome都某种程度上支持。

（一）基本用法

使用<canvas>元素必须先设置其width和height属性，出现在开始和结束标签的内容是后备信息，浏览器不支持就会显示。

要在canvas上绘图需要取得绘图上下文，取得绘图上下文对象的引用需要调用getContext()方法并传入上下文的名字。传入"2d"即可。

 <canvas id="drawing" width="200" height="200">Your browser doesn‘t support the canvas tag.</canvas>//javascript var drawing = document.getElementById("drawing"); if (drawing.getContext){       var context = drawing.getContext("2d");}

先检测getContext()方法是否存在

使用toDataURL()方法可以到处在<canvas>元素上绘制的图像。接收一个参数——图像的MIME类型格式，而且适合用于创建图像的任何上下文。

 var drawing = document.getElementById("drawing"); if (drawing.getContext){                            //取得图像的数据URI                var imgURI = drawing.toDataURL();                                //显示图像                var image = document.createElement("img");                image.src = imgURI;                document.body.appendChild(image);   }

 默认情况下，浏览器将图像编码为PNG格式。

（二）2D上下文

2D上下文的坐标开始于<canvas>的左上角，坐标为(0,0)，x轴向右，y轴向下。

1.填充和描边

fillStyle：填充

strokeStyle：描边

属性值可以是字符串、渐变对象或模式对象，默认值都是#000000。可以用CSS指定颜色的格式指定颜色。

2.绘制矩形

方法：fillRect()、strokeRect()、clearRect()。都接收4个参数：x坐标、y坐标、宽度、高度。

strokeRect()的宽度由lineWidth属性控制，lineCap属性控制线条末端的形状，lineJoin属性控制线条相交的方式。

clear()方法清除画布上的矩形区域。

3.绘制路径

先要调用beginPath()方法表示要开始绘制新路径。

arc：以(x,y)为圆心绘制弧线。

arcTo：从上一点开始绘制一条弧线。

bezierCurveTo：从上一点开始绘制一条曲线。

lineTo：从上一点开始绘制一条直线。

moveTo：游标移动到(x,y)。

quadraticCurveTo：从上一点开始绘制一条二次曲线。

rect：从点(x,y)开始绘制矩形。

创建路径后如果想绘制链接到起点的线条可以调用closePath()，fll()方法填充，stroke方法描边，clip方法创建剪切区域。

4.绘制文本

fillText() strokeText() 接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。

这两个方法以下面的属性为基础

font：大小、字体。

textAlign：文本对齐方式。

textBaseline：文本的基线。

measureText()：接收一个参数，即要绘制的文本，返回width属性。

5.变化

rotate(angle)：围绕原点选择角度。

scale：(scaleX,scaleY)：缩放图像。

translate(x,y)：将原点设置为(x,y)。

transform(...)：直接修改变化矩阵。

setTransform(...)：将变化矩阵设置为默认状态，再调用transform()。

save()：将设置放入栈，要回到之前保存的设置可以调用restore()方法，在保存设置的栈中向前返回一级，恢复之前的状态。

6.绘制图形

drawImage()：把图像绘制到画布。最简单可以只传入HTML<img>元素和起点的x、y坐标。要改变图像的大小可以再传入两个参数指定目标的宽度和高度。

还可以选择把图像的某个区域绘制到上下文，总共需要传入9个参数。

除了传入HTML<img>元素，还可以传入另一个<canvas>元素作为第一个参数。

7.阴影

下列属性自动为形状或路径绘制阴影。

shadowColor：阴影颜色，默认为0。

shadowOffsetX：形状或路径x方向的阴影便宜量，默认为0。

shadowOffsetY：形状或路径y方向的阴影便宜量，默认为0。

shadowBlur：模糊的像素，默认为0。

8.渐变

createLinearGradient()创建新渐变,返回CanvasGradient对象的实例。接收4个参数：起点x坐标、起点y坐标、终点x坐标、终点y坐标。

addColorStop：指定颜色，接收两个参数：色标位置和CSS颜色值。色标的位置是一个0（开始的颜色）到1（结束的颜色）的数字。

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

createRadialGradient()： 径向渐变，接收6个参数：两个圆的原型和半径。

9.模式

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

createPattern()：创建新模式，传入两个参数：一个HTML<img>元素和一个表示如何重复图像的字符串。第二个参数属性：repeat、repeat-x、repeat-y和no-repeat。

10.使用图像数据

getImageData()：获取原始图像数据，接收4个参数：画面区域的x和y坐标及宽度和高度，返回对象是有3个属性：width、height和data。data是一个数组，保存每个像素的数据。在data数组中，每一个像素用4个元素来保存，分别代表红、蓝、绿和透明度。

11.合成

globalAlpha：指定所有绘制的透明度，值介于0到1，默认是0。

globalCompositionOperation：后绘制的图形怎样与先绘制的图形结合。

（三）WebGL

1.类型化数据

2.WebGL上下文

3.支持

《javascript高级程序设计》笔记（十五）