Canvas——JavaScript高级程序设计笔记（12）

第15章 Canvas

---

1. 基本用法

   • 要使用<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 = drawing.getContext("2d");
//更多代码
}
   • 使用toDataURL()方法，可以导出在元素上绘制的图像。这个方法接受一个参数，即图像的MIME 类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一幅PNG 格式的图像，可以使用以下代码。
     var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
//取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}

2. 2D 上下文

   • 坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 值越大表示越靠右，y 值越大表示越靠下。默认情况下，width 和height 表示水平和垂直两个方向上可用的像素数目。

   • 两个属性：fillStyle 和strokeStyle
     var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
     以上代码将strokeStyle 设置为red（CSS 中的颜色名），将fillStyle 设置为#0000ff（蓝色）。
     然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。如前所述，这两个属
     性的值也可以是渐变对象或模式对象。本章后面会讨论这两种对象。

3. 绘制矩形

   • fillRect()、strokeRect()和clearRect()。
     这三个方法都能接收4 个参数：矩形的x 坐标、矩形的y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
   • fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属
     性指定，比如：
     var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
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);
}
   • strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定

4. 绘制路径
   要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。
    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)。
    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)开始绘制一个矩形，宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。
   创建了路径后，接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle 填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

5. 绘制文本
   fillText()和strokeText()。这两个方法都可以接收4 个参数：要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。而且，这两个方法都以下列3 个属性为基础。
    font：表示文本样式、大小及字体，用CSS 中指定字体的格式来指定，例如”10px Arial”。
    textAlign：表示文本对齐方式。可能的值有”start”、”end”、”left”、”right”和”center”。建议使用”start”和”end”，不要使用”left”和”right”，因为前两者的意思更稳妥，能同时适合从左到右和从右到左显示（阅读）的语言。
    textBaseline：表示文本的基线。可能的值有”top”、”hanging”、”middle”、”alphabetic”、
   “ideographic”和”bottom”。

6. 变换
    rotate(angle)：围绕原点旋转图像angle 弧度。
    scale(scaleX, scaleY)：缩放图像，在x 方向乘以scaleX，在y 方向乘以scaleY。scaleX
   和scaleY 的默认值都是1.0。
    translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(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()。

7. 绘制图像
   2D 绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上，可以使用drawImage()
   方法。根据期望的最终结果不同，调用这个方法时，可以使用三种不同的参数组合。最简单的调用方式
   是传入一个HTML <img>元素，以及绘制该图像的起点的x 和y 坐标。例如：
   var image = document.images[0];
   context.drawImage(image, 10, 10);
   这两行代码取得了文档中的第一幅图像，然后将它绘制到上下文中，起点为(10,10)。绘制到画布上
   的图像大小与原始大小一样。如果你想改变绘制后图像的大小，可以再多传入两个参数，分别表示目标
   宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。例如：
   context.drawImage(image, 50, 10, 20, 30);

8. 阴影
   2D 上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
    shadowColor：用CSS 颜色格式表示的阴影颜色，默认为黑色。
    shadowOffsetX：形状或路径x 轴方向的阴影偏移量，默认为0。
    shadowOffsetY：形状或路径y 轴方向的阴影偏移量，默认为0。
    shadowBlur：模糊的像素数，默认0，即不模糊。
   这些属性都可以通过context 对象来修改

9. 渐变
   渐变由CanvasGradient 实例表示，很容易通过2D 上下文来创建和修改。要创建一个新的线性渐
   变，可以调用createLinearGradient()方法。这个方法接收4 个参数：起点的x 坐标、起点的y 坐
   标、终点的x 坐标、终点的y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回
   CanvasGradient 对象的实例。
   创建了渐变对象后，下一步就是使用addColorStop()方法来指定色标。这个方法接收两个参数：
   色标位置和CSS 颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字。例如：
   var gradient = context.createLinearGradient(30, 30, 70, 70);
   gradient.addColorStop(0, “white”);
   gradient.addColorStop(1, “black”);

10. 模式
    要创建一个新模式， 可以调用
    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);

11. WebGL 上下文。WebGL 是从OpenGL ES 2.0 移植到浏览器中的，而OpenGL
    ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比2D 上下文更丰富
    和更强大的图形图像处理能力，比如：
     用GLSL（OpenGL Shading Language，OpenGL 着色语言）编写的顶点和片段着色器
     支持类型化数组，即能够将数组中的数据限定为某种特定的数值类型
     创建和操作纹理