Canvas API 的基础使用

文章参考

Canvas API

Canvas概述

<canvas> 元素用于生成图像。它本身就像一个画布，JavaScript 通过操作它的 API，在上面生成图像。它的底层是一个个像素，基本上 <canvas> 是一个可以用 JavaScript 操作的位图（bitmap）。

它与 SVG 图像的区别在于，<canvas> 是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。

使用 Canvas API 之前，需要在网页里面新建一个元素。

<canvas id="myCanvas" width="400" height="250">
  您的浏览器不支持 Canvas
</canvas>

如果浏览器不支持这个 API，就会显示 <canvas> 标签中间的文字：“您的浏览器不支持 Canvas”。

每个 <canvas> 元素都有一个对应的CanvasRenderingContext2D对象（上下文对象）。Canvas API 就定义在这个对象上面。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

上面代码中，<canvas> 元素节点对象的getContext()方法，返回的就是CanvasRenderingContext2D对象。

注意，Canvas API 需要getContext方法指定参数2d，表示该 <canvas> 节点生成 2D 的平面图像。如果参数是webgl，就表示用于生成 3D 的立体图案，这部分属于 WebGL API。

按照用途，Canvas API 分成两大部分：绘制图形和图像处理。

Canvas API：绘制图形

Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

路径

提供方法和属性用来绘制路径。

• beginPath()：开始绘制路径。
• closePath()：结束路径，返回到当前路径的起始点，会从当前点到起始点绘制一条直线。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。
• moveTo()：设置路径的起点，即将一个新路径的起始点移动到(x，y)坐标。
• lineTo()：使用直线从当前点连接到(x, y)坐标。
• fill()：在路径内部填充颜色（默认为黑色），使之变成一个实心的图形。
• stroke()：路径线条着色（默认为黑色）。
• fillStyle：指定路径填充的颜色和样式（默认为黑色）。
• strokeStyle：指定路径线条的颜色和样式（默认为黑色）。

线型

提供方法和属性控制线条的视觉特征。

• lineWidth：指定线条的宽度，默认为1.0。
• lineCap：指定线条末端的样式，有三个可能的值：butt（默认值，末端为矩形）、round（末端为圆形）、square（末端为突出的矩形，矩形宽度不变，高度为线条宽度的一半）。
• lineJoin：指定线段交点的样式，有三个可能的值：round（交点为扇形）、bevel（交点为三角形底边）、miter（默认值，交点为菱形)。
• miterLimit：指定交点菱形的长度，默认为10。该属性只在lineJoin属性的值等于miter时有效。
• getLineDash()：返回一个数组，表示虚线里面线段和间距的长度。
• setLineDash()：数组，用于指定虚线里面线段和间距的长度。

矩形

提供方法用来绘制矩形。四个方法的格式都一样，都接受四个参数，分别是矩形左上角的横坐标和纵坐标、矩形的宽和高。

• rect()：绘制矩形路径。
• fillRect()：填充一个矩形，向一个矩形区域填充颜色。
• strokeRect()：绘制矩形区域的边框。
• clearRect()：指定矩形区域的像素都变成透明，用于擦除指定矩形区域的像素颜色，等同于把早先的绘制效果都去除。

弧线

提供方法用于绘制弧形。

• arc()：通过指定圆心和半径绘制弧形，主要用来绘制圆形或扇形。
• arcTo()：通过指定两根切线和半径绘制弧形，主要用来绘制圆弧，需要给出两个点的坐标，当前点与第一个点形成一条直线，第一个点与第二个点形成另一条直线，然后画出与这两根直线相切的弧线。。

文本

提供方法和属性用于绘制文本。

• fillText()：在指定位置绘制实心字符。
  • 不支持文本断行，所有文本一定出现在一行内。如果要生成多行文本，只有调用多次fillText()方法。
• strokeText()：在指定位置绘制空心字符。
  • 参数与fillText()一致。
• measureText()：接受一个字符串作为参数，返回一个 TextMetrics 对象。可以从这个对象上面获取参数字符串的信息，目前主要是文本渲染后的宽度（width）。
• font：指定字型大小和字体，默认值为10px sans-serif。
• textAlign：文本的对齐方式，默认值为start。
• direction：文本的方向，默认值为inherit，表示继承<canvas>或document的设置。。
• textBaseline：文本的垂直位置，默认值为alphabetic，表示字母位于字母表的正常位置（四线格的第三根线）。

渐变色和图像填充

提供方法用于设置渐变效果和图像填充效果。

• createLinearGradient()：定义线性渐变样式。返回值是一个CanvasGradient对象，该对象只有一个addColorStop()方向，用来指定渐变点的颜色。
• createRadialGradient()：定义辐射渐变样式。接受六个参数，x0和y0是辐射起始的圆的圆心坐标，r0是起始圆的半径，x1和y1是辐射终止的圆的圆心坐标，r1是终止圆的半径。返回值也是一个CanvasGradient对象。
• createPattern()：定义图像填充样式。在指定方向上不断重复该图像，填充指定的区域。

阴影

提供属性用于设置阴影。

• shadowBlur：阴影的模糊程度，默认为0。
• shadowColor：阴影的颜色，默认为black。
• shadowOffsetX：阴影的水平位移，默认为0。
• shadowOffsetY：阴影的垂直位移，默认为0。

Canvas API：图像处理

drawImage() 将图像文件写入画布

Canvas API 允许将图像文件写入画布，做法是读取图片后，使用drawImage()方法将这张图片放上画布。

drawImage()有三种使用格式。

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

各个参数的含义如下。

• image：图像元素
• sx：图像内部的横坐标，用于映射到画布的放置点上。
• sy：图像内部的纵坐标，用于映射到画布的放置点上。
• sWidth：图像在画布上的宽度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的宽度。
• sHeight：图像在画布上的高度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的高度。
• dx：画布内部的横坐标，用于放置图像的左上角
• dy：画布内部的纵坐标，用于放置图像的右上角
• dWidth：图像在画布内部的宽度，会产生缩放效果。
• dHeight：图像在画布内部的高度，会产生缩放效果。

像素读写

以下三个方法与像素读写相关。

• getImageData()：将画布读取成一个 ImageData 对象
• putImageData()：将 ImageData 对象写入画布
• createImageData()：生成 ImageData 对象

save()，restore()

save()方法用于将画布的当前样式保存到堆栈，相当于在内存之中产生一个样式快照。

restore()方法将画布的样式恢复到上一个保存的快照，如果没有已保存的快照，则不产生任何效果。

上下文环境，restore方法用于恢复到上一次保存的上下文环境。

canvas

canvas属性指向当前CanvasRenderingContext2D对象所在的<canvas>元素。该属性只读。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.canvas === canvas // true

图像变换

以下方法用于图像变换。

• rotate()：图像旋转
• scale()：图像缩放
  • 如果缩放因子为1，就表示图像没有任何缩放。如果为-1，则表示方向翻转。
• translate()：图像平移
• transform()：通过一个变换矩阵完成图像变换
  • 接受一个变换矩阵的六个元素作为参数，完成缩放、旋转、移动和倾斜等变形。
• setTransform()：取消前面的图像变换

<canvas>元素的方法

除了CanvasRenderingContext2D对象提供的方法，<canvas>元素本身也有自己的方法。

HTMLCanvasElement.toDataURL()

<canvas>元素的toDataURL()方法，可以将 Canvas 数据转为 Data URI 格式的图像。

canvas.toDataURL(type, quality)

toDataURL()方法接受两个参数。

• type：字符串，表示图像的格式。默认为image/png，另一个可用的值是image/jpeg，Chrome 浏览器还可以使用image/webp。
• quality：浮点数，0到1之间，表示 JPEG 和 WebP 图像的质量系数，默认值为0.92。

该方法的返回值是一个 Data URI 格式的字符串。

function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL('image/png');
  return image;
}

上面的代码将<canvas>元素，转化成PNG Data URI。

var fullQuality = canvas.toDataURL('image/jpeg', 0.9);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.6);
var lowQuality = canvas.toDataURL('image/jpeg', 0.3);

上面代码将<canvas>元素转成高画质、中画质、低画质三种 JPEG 图像。

HTMLCanvasElement.toBlob()

HTMLCanvasElement.toBlob()方法用于将<canvas>图像转成一个 Blob 对象，默认类型是image/png。它的使用格式如下。

// 格式
canvas.toBlob(callback, mimeType, quality)

// 示例
canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)

toBlob()方法可以接受三个参数。

• callback：回调函数。它接受生成的 Blob 对象作为参数。
• mimeType：字符串，图像的 MIMEType 类型，默认是image/png。
• quality：浮点数，0到1之间，表示图像的质量，只对image/jpeg和image/webp类型的图像有效。

注意，该方法没有返回值。

下面的例子将图像复制成图像。

var canvas = document.getElementById('myCanvas');

function blobToImg(blob) {
  var newImg = document.createElement('img');
  var url = URL.createObjectURL(blob);

  newImg.onload = function () {
    // 使用完毕，释放 URL 对象
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
}

canvas.toBlob(blobToImg);