JavaScript高级程序设计第15章（使用Canvas）

背景：与浏览器环境中的其他组件类似，<canvas>由几组API组成，但并非所有浏览器都支持所有这些API。除了几倍基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。目前，所有支持该元素的浏览器都支持2D上下文及文本API。因此我们这篇文章就只讲2D上下文。

兼容性：IE9+以及主流浏览器

1.基本用法

要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小（也能通过CSS属性添加样式）。出现在开始和结束标签的内容是必备信息，如果浏览器不支持<canvas>元素，就会显示这些信息，类似于<img>中的alt属性。

<canvas id="drawing" width="200" height="100">Your browser doesn't support canvas tag</canvas>

要在这块画布canvas绘图，需要取得绘图上下文。传入"2d"，就可以取得2D上下文

var drawing  = document.getElementById("drawing");if(drawing.getContext){  var context = drawing.getContext("2d");  ....}

使用toDataURL()方法，可以导出在<canvas>元素上绘制的元素。这个方法接受一个参数，即图像耳MIME类似格式("image/png")，而且适合于创建图像的任何上下文，

var drawing = document.getElementById("drawing");if(drawing.getContext){  //取得图像的数据URL  var imgURL = drawing.toDataURL("image/png");    //显示图像  var image = document.createElement("img");  image.src=imgURL;  //imgURL:data:image/png;base64,  document.body.appendChild(img);}

默认情况下，浏览器会将图像编码为PNG格式，除非另行指定。例如"image/jpeg";

如果绘制到画布上的图像源自不同的域，toDataURL()方法会抛出错误

2.2D上下文

①2D上下文的两种基本绘图操作时填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘划线。操作的结果取决于两个属性：fillStyle和StrokeStyle。这个属性的值可以是字符串、渐变对象或模式对象，而且他们的默认值都是“#000000”；字符串可以是颜色值的任何格式，包括颜色明、十六进制码、rgb、rgba、hsl或hsla

context.strokeStyle = "red";context.fillStyle = "#0000ff"

②绘制矩形

与矩形有关的方法包括fillRect()、strokeRect和clearRect()。这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形的宽度和矩形高度。这些参数的单位都是像素

//绘制红色矩形context.fillStyle = "#ff0000";conetxt.fillRect(10, 10, 50, 50);//绘制半透明的蓝色矩形context.fillStyle = "rgba(0, 0, 255, 0.5)";context.fillRect(30, 30, 50, 50);

描边线条的宽度：lineWidth，该属性的值可以是任意整数

线条末端的形状：lineCap,这属性的值方头"butt"、源头"round"、方头"square"

线条相交的方式：lineJoin,这属性的值"round"圆交、"bevel"斜交、“miter”斜接

clearRect()方法用于清除画布上的矩形区域（经典例子：刮刮乐）

③绘制路径

首先：beginPath()方法，表示要开始绘制新路径

然后：调用下列方法来实际绘制路径

           rect(x, y, width, height)：从点（x,y）开始绘制一个矩形路径，宽度和高度分别由width和height决定

           arc(x, y, radius, startAngle, endAngle, counterClockwIse)：以(x,y)为圆心，半径为radius，startAngle和endAngle分别为起始和结束角度。最后一个参数表示startAngle和endAngle是否                 按逆时针计算，值为false表示按顺时针计算，绘制成一条弧线

           arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2, y2)为止，兵器以给定的半径radius穿过(x1, y1).

           lineTo(x, y)：从上一点开始绘制一条直线，到(x, y)为止

           moveTo(x, y)：将绘图游标移动到(x, y)，就不是从上一点了

接下来： 调用closePath()绘制一条连接到路径起点的线条

               调用fill()方法或者stroke()对路径进行填充或者描边，这取决于画笔用的是fillStyle还是strokeStyle。

最后：调用clip()，可以在路径上创建一个剪切区域

//开始路径context.beginPath();//绘制外圆,角度转弧度 PI /180 * 角度context.arc(100, 100, 99, 0, 2 * Math.PI, false);//绘制内圆，这里必须要先使用moveTo，因为画笔默认是从上一点开始画的，不使用会绘制出多余的线条context.moveTo(194, 100);context.arc(100, 100, 94 , 0, 2* Math.PI, false);

④绘制文本

绘制文本主要由两个方法：fillText() 和 strokeText()，使用fillText()更好，因为文字实心更好看，模拟了在网页中正常显示文本

两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度

这两个方法都以下列3个属性为基础，都是上下文的属性

font：表示文本样式、大小及字体，用CSS中指定字体的格式来写，例如"bold 14px Arial"

textAlign：表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"、"center"。建议使用"start"和"end"而不是"left"和"right"

textBaseLine：表示文本的基线，可能的值有"top"、"hanging"、"middle"、“alphabetic”字母的、"ideographic"表意的和"bottom"

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

这里把textAlign设置为"center"，把textBaseLine设置为"middle"，所以坐标(100, 20)表示的是文本水平和垂直重点的坐标。

当textBaseLine值为"hanging"、"ideographic"、"alphabetic"时分别指向字体的特定基线坐标

由于绘制文本比较复杂，特定是需要把文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText()。这个方法接受一个参数，即要绘制的文本。返回一个TextMetrics对象，目前只有一个width属性。例如，你想再一个140px款的矩形区域上绘制hello word！可以从100px的字体大小开始递减，最终找到合适的字体大小

⑤变换

通过上下文的变换，可以把处理后的图像绘制到画布上。

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

scale(scaleX, scaleY)：缩放图像

translate(x, y)：将坐标原点移动到(x, y)。执行后，坐标(0, 0)会变成之前由(x, y)表示的点

transform(m1_1, m1_2, m2_1, m2_2, dx, dy): 直接修改变换矩阵

如果你知道将来还要返回某组属性与变换的组合，可以对上下文对象调用save()方法。调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。然会对上下文进行其他修改。等想要回到之前保存的设置时，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。其实我觉得重新设置也不麻烦。save()方法保存的只是对绘图上下文的设置与包换，不会保存绘图上下文的内容

⑥绘制图像

对上下文对象使用drawImage()方法。可以使用三种不同参数组合。

1.传入一个HTML<img>元素，以及绘制该图像的起点的x和y坐标。

2.如果你想要改变绘制后图像的大小，可以再多传入两个参数，分别表示目标宽度和目标高度。通过这种方法来缩放图像并不影响上下文的变换矩阵。

3.再复杂一点，可以选择把图像的某个区域绘制到上下文。这种调用方法需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。

除了给drawImage()方法传入<img>元素外，还可以传入另一个<canvas>元素作为第一个参数。这样，就可以把另一个画布内容绘制到当前画布上。

⑦阴影

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

shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur

⑧渐变

对上下文使用createLinearGradient()方法创建线性渐变对象。该方法接收4个参数：起点的x坐标、起点的y坐标、终点的x坐标、重点的y坐标

创建线性渐变对象后，下一部就是使用addColorStop()来指定色标。这个方法接收两个参数：色标位置和CSS颜色值。色标位置是一个0到1之间的数字。

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)

如果没把渐变坐标和绘制矩形匹配的话，就会只显示一部分渐变

创建放射渐变，可以使用createRadialGradient()方法。该方法接收6个参数，对应着两个圆的圆心和半径。因为创建比较麻烦，所以径向渐变并不是那么容易控制。不过一般来说，让起点圆和重点圆保持为同心圆的情况比较多。

⑨模式

模式其实就是重复的图像，可以用来填充或描边图形。调用上下文对象的createPattern()方法并传入两个参数：一个HTML<img>元素和一个表示如何重复图像的字符串。其中，第二个参数的值与CSS的background-repeat属性值相同，包括"repeat"、"repeat-x"、"repeat-y"和"no-repeat";

var image = document.images[0],       pattern = context.createPattern(image,"repeat");//绘制矩形context.fillStyle = pattern;context.fillRect(10, 10, 150, 150);

需要注意的是，模式与渐变一样，都是从画布的原点(0,, 0)开始的。

10.合成

2D上下文对象还有两个属性，可以应道到2D上下文中所有绘制操作的属性：globalAlpha和globalComposition-Operation

其中globalAlpha是一个介于0到1之间的值，包括0和1，用于指定所有绘制的透明度。默认为0

第二个属性globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合，可能的值很多，只列几个，详情，戳globalCompositionOperation

source-over（默认值）：后绘制的图形位于绘制的图形上方

2D上下文的使用就先讲到这里，3D就不讲了，毕竟支持度不高