JavaScript笔记：使用canvas绘图

「爱情、让人受尽委屈。」 2022-07-16 02:57 176阅读 0赞

不用说，HTML5 添加的最受欢迎的功能就是canvas元素。这个元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。

IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某种程度上支持canvas。

与浏览器环境中的其他组件类似，canvas由几组 API 构成，但并非所有浏览器都支持所有这些 API。

除了具备基本绘图能力的 2D 上下文，canvas还建议了一个名为 WebGL 的 3D 上下文。目前， 支持该元素的浏览器都支持 2D 上下文及文本 API，但对 WebGL 的支持还不够好。

由于 WebGL 还是实验性的，因此要得到所有浏览器支持还需要很长一段时间。

Firefox 4+和 Chrome 支持 WebGL 规范的早期版本，但一些老版本的操作系统，比如 Windows XP，由于缺少必要的绘图驱动程序，即便安装了这两款浏览器也无济于事。

## 基本用法 ##

要使用canvas元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持canvas元素，就会显示这些信息。下面就是canvas元素的例子：

<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>

与其他元素一样，canvas元素对应的 DOM 元素对象也有 width 和 height 属性，可以随意修改。而且，也能通过 CSS 为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

要在这块画布(canvas)上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用 getContext() 方法并传入上下文的名字。传入”2d”，就可以取得 2D 上下文对象。

var drawing = document.getElementById("drawing");
    //确定浏览器支持<canvas>元素 
    if (drawing.getContext){
        var context = drawing.getContext("2d"); 
        //更多代码
    }

在使用canvas元素之前，首先要检测 getContext()方法是否存在，这一步非常重要。

有些浏览器会为 HTML 规范之外的元素创建默认的 HTML 元素对象，在这种情况下，即使 drawing 变量中保存着一个有效的元素引用，也检测不到 getContext() 方法。

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

比如，要取得画布中的一幅 PNG 格式的 图像，可以使用以下代码。

var drawing = document.getElementById("drawing");
    //确定浏览器支持<canvas>元素 
    if (drawing.getContext){
        //取得图像的数据 URI
        var imgURI = drawing.toDataURL("image/png");
        //显示图像
        var image = document.createElement("img"); 
        document.body.appendChild(image);
    }

默认情况下，浏览器会将图像编码为 PNG 格式(除非另行指定)。

Firefox 和 Opera 也支持基于 “image/jpeg”参数的 JPEG 编码格式。由于这个方法是后来才追加的，所以支持canvas的浏览器也是在较新的版本中才加入了对它的支持，比如 IE9、Firefox 3.5 和 Opera 10。

## 2D 上下文 ##

使用 2D 绘图上下文提供的方法，可以绘制简单的 2D 图形，比如矩形、弧线和路径。

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

**1、填充和描边**

2D 上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式(颜色、渐变或图像)填充图形；描边，就是只在图形的边缘画线。

大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle 和 strokeStyle。

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是”\#000000”。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式。

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(蓝色)。 然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。

如前所述，这两个属性的值也可以是渐变对象或模式对象。本章后面会讨论这两种对象。

**2、绘制矩形**

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。

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

首先，fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定，比如：

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 属性指定。比如：

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

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

本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。下面看一个例子。

//清除一个小矩形
    context.clearRect(40, 40, 10, 10);

**3、绘制路径**

2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。  
要绘制路径，首先必须调用 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()，这个方法可以在路径上创建一个剪切区域。

下面看一个例子，即绘制一个不带数字的时钟表盘。

//开始路径 
    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);
    //描边路径，调用 stroke()方法，这样才能把图形绘制到画布上
    context.stroke();

在 2D 绘图上下文中，路径是一种主要的绘图方式，因为路径能为要绘制的图形提供更多控制。  
由于路径的使用很频繁，所以就有了一个名为 isPointInPath()的方法。这个方法接收 x 和 y 坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上，例如：

if (context.isPointInPath(100, 100)){
        alert("Point (100, 100) is in the path.");
    }

2D 上下文中的路径 API 已经非常稳定，可以利用它们结合不同的填充和描边样式，绘制出非常复杂的图形来。

**4、绘制文本**

文本与图形总是如影随形。  
为此，2D 绘图上下文也提供了绘制文本的方法。绘制文本主要有两个方法：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"。

这几个属性都有默认值，因此没有必要每次使用它们都重新设置一遍值。  
fillText()方法使用 fillStyle 属性绘制文本，而 strokeText() 方法使用 strokeStyle 属性为文本描边。相对来说，还是使用 fillText()的时候更多，因为该方法模仿了在网页中正常显示文本。例如，下面的代码在前一 节创建的表盘上方绘制了数字 12：

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

因为这里把 textAlign 设置为”center”，把 textBaseline 设置为”middle”，所以坐标 (100,20) 表示的是文本水平和垂直中点的坐标。如果将 textAlign 设置为”start”，则 x 坐标表示的是文本左端的位置(从左到右阅读的语言)；设置为”end”，则 x 坐标表示的是文本右端的位置(从左到右阅读的 语言)。例如：

//起点对齐
    context.textAlign = "start"; 
    context.fillText("12", 100, 40);
    //终点对齐
    context.textAlign = "end"; 
    context.fillText("12", 100, 60);

由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2D 上下文提供了辅助确定文本大小的方法 measureText()。

这个方法接收一个参数，即要绘制的文本；返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性，但将来还会增加更多度量属性。  
measureText()方法利用 font、textAlign 和 textBaseline 的当前值计算指定文本的大小。 比如，假设你想在一个 140 像素宽的矩形区域中绘制文本 Hello world!，下面的代码从 100 像素的字体大小开始递减，最终会找到合适的字体大小。

var fontSize = 100;
    context.font = fontSize + "px Arial";
    while(context.measureText("Hello world!").width > 140){
        fontSize--;
        context.font = fontSize + "px Arial";
    }
    context.fillText("Hello world!", 10, 10);
    context.fillText("Font size is " + fontSize + "px", 10, 50);

前面提到过，fillText 和 strokeText() 方法都可以接收第四个参数， 也就是文本的最大像素宽度。不过，这个可选的参数尚未得到所有浏览器支持 (最早支持它的是 Firefox 4)。提供这个参数后，调用 fillText() 或 strokeText() 时如果传入的字符串大于最大宽度，则绘制的文本字符的高度正确，但宽度会收缩以适应最大宽度。

**5、变换**

通过上下文的变换，可以把处理后的图像绘制到画布上。  
2D 绘制上下文支持各种基本的绘制变换。 创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。 为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。

可以通过如下方法来修改变换矩阵。

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()。

//变换原点 
    context.translate(100, 100);
    //绘制分针 
    context.moveTo(0,0); 
    context.lineTo(0, -85);
    //绘制时针 
    context.moveTo(0, 0); 
    context.lineTo(-65, 0);
    //描边路径
    context.stroke();

把原点变换到时钟表盘的中心点(100,100)后，在同一方向上绘制线条就变成了简单的数学问题了。 所有数学计算都基于(0,0)，而不是(100,100)。还可以更进一步，像下面这样使用 rotate() 方法旋转时钟的表针。

无论是刚才执行的变换，还是 fillStyle、strokeStyle 等属性，都会在当前上下文中一直有效，除非再对上下文进行什么修改。虽然没有什么办法把上下文中的一切都重置回默认值，但有两个方法可 以跟踪上下文的状态变化。如果你知道将来还要返回某组属性与变换的组合，可以调用 save() 方法。 调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。然后可以对上下文进行其他修改。等想要回到之前保存的设置时，可以调用 restore() 方法，在保存设置的栈结构中向前返回一级， 恢复之前的状态。连续调用 save() 可以把更多设置保存到栈结构中，之后再连续调用 restore() 则可以一级一级返回。

需要注意的是，save() 方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。

**6、绘制图像**

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);

执行代码后，绘制出来的图像大小会变成 20×30 像素。

除了上述两种方式，还可以选择把图像中的某个区域绘制到上下文中。  
drawImage()方法的这种调用方式总共需要传入 9 个参数：要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用 drawImage()方法可以获得最多的控制。例如：

context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);

这行代码只会把原始图像的一部分绘制到画布上。原始图像的这一部分的起点为(0,10)，宽和高都是 50 像素。最终绘制到上下文中的图像的起点是(0,100)，而大小变成了 40×60 像素。

**7、阴影**

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

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

这些属性都可以通过 context 对象来修改。只要在绘制前为它们设置适当的值，就能自动产生阴影。例如：

//设置阴影
    context.shadowOffsetX = 5; 
    context.shadowOffsetY = 5;
    context.shadowBlur = 4; 
    context.shadowColor = "rgba(0, 0, 0, 0.5)";

注意不同浏览器对阴影的支持有一些差异。

**8、渐变**

渐变由 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");

此时，gradient 对象表示的是一个从画布上点(30,30)到点(70,70)的渐变。起点的色标是白色，终点的色标是黑色。然后就可以把 fillStyle 或 strokeStyle 设置为这个对象，从而使用渐变来绘制 形状或描边：

//绘制红色矩形
    context.fillStyle = "#ff0000"; 
    context.fillRect(10, 10, 50, 50);
    //绘制渐变矩形
    context.fillStyle = gradient; 
    context.fillRect(30, 30, 50, 50);

为了让渐变覆盖整个矩形，而不是仅应用到矩形的一部分，矩形和渐变对象的坐标必须匹配才行。

如果没有把矩形绘制到恰当的位置，那可能就只会显示部分渐变效果。

## WebGL ##

WebGL 是针对 Canvas 的 3D 上下文。

<待续>