Partagez quelques interfaces Canvas et effets d'animation essentiels pour le front-end (encyclopédie)

Aperçu L'élément

<canvas> est utilisé pour générer des images. C'est lui-même comme un canevas sur lequel JavaScript génère des images en manipulant son API. Sa couche inférieure est constituée de chaque pixel. En gros, <canvas> est un bitmap qui peut être utilisé avec JavaScript.

La différence entre celui-ci et les images SVG est que <canvas> est un script qui appelle diverses méthodes pour générer des images, tandis que SVG est un fichier XML qui génère des images via divers sous-éléments.

Avant d'utiliser l'API Canvas, vous devez créer un nouvel élément <canvas> dans la page Web.

你的浏览器不支持canvas!" title="" data-original-title="复制">

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

Si le navigateur ne supporte pas cette API, le texte au milieu de la balise <canvas> s'affichera : "Votre navigateur ne supporte pas Canvas ".

Chaque élément <canvas> a un objet CanvasRenderingContext2D correspondant (objet contextuel). L'API Canvas est définie sur cet objet.

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

Dans le code ci-dessus, la méthode <canvas> de l'objet nœud d'élément getContext() renvoie l'objet CanvasRenderingContext2D.

Notez que l'API Canvas nécessite la méthode getContext pour spécifier le paramètre 2d, ce qui signifie que le nœud <canvas> génère une image plate 2D. Si le paramètre est webgl, cela signifie qu'il est utilisé pour générer des motifs 3D tridimensionnels. Cette partie appartient à l'API WebGL.

Selon l'objectif, l'API Canvas est divisée en deux parties : le dessin de graphiques et le traitement d'images.

API Canvas : dessiner des graphiques

La toile Canvas fournit un espace plat pour dessiner, et chaque point de l'espace a ses propres coordonnées. L'origine (0, 0) est située dans le coin supérieur gauche de l'image, la direction positive de l'axe x est l'origine vers la droite, et la direction positive de l'axe y est l'origine vers le bas.

Chemin

Les méthodes et propriétés suivantes sont utilisées pour tracer des chemins.

• CanvasRenderingContext2D.beginPath() : Commencez à tracer le chemin.
• CanvasRenderingContext2D.closePath() : Terminer le chemin et revenir au point de départ du chemin actuel. Une ligne droite sera tracée du point actuel au point de départ. Si la forme est déjà fermée ou ne comporte qu'un seul point, cette méthode n'aura aucun effet.
• CanvasRenderingContext2D.moveTo() : Définissez le point de départ du chemin, c'est-à-dire déplacez le point de départ d'un nouveau chemin vers les coordonnées (x，y).
• CanvasRenderingContext2D.lineTo() : utilisez une ligne droite pour vous connecter du point actuel à la coordonnée (x, y).
• CanvasRenderingContext2D.fill() : Remplissez l'intérieur du chemin de couleur (la valeur par défaut est noire).
• CanvasRenderingContext2D.stroke() : Coloration de la ligne de chemin (la valeur par défaut est noire).
• CanvasRenderingContext2D.fillStyle : Spécifiez la couleur et le style de remplissage du chemin (la valeur par défaut est noir).
• CanvasRenderingContext2D.strokeStyle : Spécifiez la couleur et le style des lignes de chemin (la valeur par défaut est noire).

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

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

Le code ci-dessus détermine uniquement la forme du chemin, qui n'est pas visible sur la toile car il n'y a pas de couleur. Il faut donc encore le colorier.

ctx.fill();
// 或者
ctx.stroke();

Dans le code ci-dessus, les deux méthodes peuvent rendre le chemin visible. fill()Remplissez l'intérieur du chemin avec de la couleur pour en faire une forme solide stroke()Colorez uniquement les lignes du chemin.

Les deux méthodes utilisent le noir par défaut. Vous pouvez utiliser les attributs fillStyle et strokeStyle pour spécifier d'autres couleurs.

ctx.fillStyle = "red";
ctx.fill();
// 或者
ctx.strokeStyle = "red";
ctx.stroke();

上面代码将填充和线条的颜色指定为红色。

线型

以下的方法和属性控制线条的视觉特征。

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

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

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.setLineDash([15, 5]);
ctx.stroke();

上面代码中，线条的宽度为 3，线条的末端和交点都改成圆角，并且设置为虚线。

矩形

以下方法用来绘制矩形。

• CanvasRenderingContext2D.rect()：绘制矩形路径。
• CanvasRenderingContext2D.fillRect()：填充一个矩形。
• CanvasRenderingContext2D.strokeRect()：绘制矩形边框。
• CanvasRenderingContext2D.clearRect()：指定矩形区域的像素都变成透明。

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

CanvasRenderingContext2D.rect()方法用于绘制矩形路径。

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

ctx.rect(10, 10, 100, 100);
ctx.fill();

上面代码绘制一个正方形，左上角坐标为(10, 10)，宽和高都为 100。

CanvasRenderingContext2D.fillRect()用来向一个矩形区域填充颜色。

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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

上面代码绘制一个绿色的正方形，左上角坐标为(10, 10)，宽和高都为 100。

CanvasRenderingContext2D.strokeRect()用来绘制一个矩形区域的边框。

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

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);

上面代码绘制一个绿色的空心正方形，左上角坐标为(10, 10)，宽和高都为 100。

CanvasRenderingContext2D.clearRect()用于擦除指定矩形区域的像素颜色，等同于把早先的绘制效果都去除。

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

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(15, 15, 90, 90);

上面代码先绘制一个 100 x 100 的正方形，然后在它的内部擦除 90 x 90 的区域，等同于形成了一个 5 像素宽度的边框。

弧线

以下方法用于绘制弧形。

• CanvasRenderingContext2D.arc()：通过指定圆心和半径绘制弧形。
• CanvasRenderingContext2D.arcTo()：通过指定两根切线和半径绘制弧形。

CanvasRenderingContext2D.arc()主要用来绘制圆形或扇形。

// 格式
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

// 实例
ctx.arc(5, 5, 5, 0, 2 * Math.PI, true);

arc()方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false），这个参数用来控制扇形的方向（比如上半圆还是下半圆）。

下面是绘制实心圆形的例子。

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

ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
ctx.fill();

上面代码绘制了一个半径 50，起始角度为 0，终止角度为 2 * PI 的完整的圆。

绘制空心半圆的例子。

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

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.stroke();

CanvasRenderingContext2D.arcTo()方法主要用来绘制圆弧，需要给出两个点的坐标，当前点与第一个点形成一条直线，第一个点与第二个点形成另一条直线，然后画出与这两根直线相切的弧线。

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

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(50, 50, 100, 0, 25);
ctx.lineTo(100, 0);
ctx.stroke();

上面代码中，arcTo()有 5 个参数，前两个参数是第一个点的坐标，第三个参数和第四个参数是第二个点的坐标，第五个参数是半径。然后，(0, 0)与(50, 50)形成一条直线，然后(50, 50)与(100, 0)形成第二条直线。弧线就是与这两根直线相切的部分。

文本

以下方法和属性用于绘制文本。

• CanvasRenderingContext2D.fillText()：在指定位置绘制实心字符。
• CanvasRenderingContext2D.strokeText()：在指定位置绘制空心字符。
• CanvasRenderingContext2D.measureText()：返回一个 TextMetrics 对象。
• CanvasRenderingContext2D.font：指定字型大小和字体，默认值为10px sans-serif。
• CanvasRenderingContext2D.textAlign：文本的对齐方式，默认值为start。
• CanvasRenderingContext2D.direction：文本的方向，默认值为inherit。
• CanvasRenderingContext2D.textBaseline：文本的垂直位置，默认值为alphabetic。

fillText()方法用来在指定位置绘制实心字符。

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth])

该方法接受四个参数。

• text：所要填充的字符串。
• x：文字起点的横坐标，单位像素。
• y：文字起点的纵坐标，单位像素。
• maxWidth：文本的最大像素宽度。该参数可选，如果省略，则表示宽度没有限制。如果文本实际长度超过这个参数指定的值，那么浏览器将尝试用较小的字体填充。

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

ctx.fillText("Hello world", 50, 50);

上面代码在(50, 50)位置写入字符串Hello world。

注意，fillText()方法不支持文本断行，所有文本一定出现在一行内。如果要生成多行文本，只有调用多次fillText()方法。

strokeText()方法用来添加空心字符，它的参数与fillText()一致。

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

ctx.strokeText("Hello world", 50, 50);

上面这两种方法绘制的文本，默认都是10px大小、sans-serif字体，font属性可以改变字体设置。该属性的值是一个字符串，使用 CSS 的font属性即可。

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

ctx.font = "Bold 20px Arial";
ctx.fillText("Hello world", 50, 50);

textAlign属性用来指定文本的对齐方式。它可以取以下几个值。

• left：左对齐
• right：右对齐
• center：居中
• start：默认值，起点对齐（从左到右的文本为左对齐，从右到左的文本为右对齐）。
• end：结尾对齐（从左到右的文本为右对齐，从右到左的文本为左对齐）。

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

ctx.font = "Bold 20px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello world", 50, 50);

direction属性指定文本的方向，默认值为inherit，表示继承<canvas>或document的设置。其他值包括ltr（从左到右）和rtl（从右到左）。

textBaseline属性指定文本的垂直位置，可以取以下值。

• top：上部对齐（字母的基线是整体上移）。
• hanging：悬挂对齐（字母的上沿在一根直线上），适用于印度文和藏文。
• middle：中部对齐（字母的中线在一根直线上）。
• alphabetic：默认值，表示字母位于字母表的正常位置（四线格的第三根线）。
• ideographic：下沿对齐（字母的下沿在一根直线上），使用于东亚文字。
• bottom：底部对齐（字母的基线下移）。对于英文字母，这个设置与ideographic没有差异。

measureText()方法接受一个字符串作为参数，返回一个 TextMetrics 对象，可以从这个对象上面获取参数字符串的信息，目前主要是文本渲染后的宽度（width）。

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

var text1 = ctx.measureText("Hello world");
text.width; // 49.46

ctx.font = "Bold 20px Arial";
text2.width; // 107.78

上面代码中，10px大小的字符串Hello world，渲染后宽度为49.46。放大到20px以后，宽度为107.78。

渐变色和图像填充

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

• CanvasRenderingContext2D.createLinearGradient()：定义线性渐变样式。
• CanvasRenderingContext2D.createRadialGradient()：定义辐射渐变样式。
• CanvasRenderingContext2D.createPattern()：定义图像填充样式。

createLinearGradient()方法按照给定直线，生成线性渐变的样式。

ctx.createLinearGradient(x0, y0, x1, y1);

ctx.createLinearGradient(x0, y0, x1, y1)方法接受四个参数：x0和y0是起点的横坐标和纵坐标，x1和y1是终点的横坐标和纵坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。

该方法的返回值是一个CanvasGradient对象，该对象只有一个addColorStop()方向，用来指定渐变点的颜色。addColorStop()方法接受两个参数，第一个参数是 0 到 1 之间的一个位置量，0 表示起点，1 表示终点，第二个参数是一个字符串，表示 CSS 颜色。

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

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

上面代码中，定义了渐变样式gradient以后，将这个样式指定给fillStyle属性，然后fillRect()就会生成以这个样式填充的矩形区域。

createRadialGradient()方法定义一个辐射渐变，需要指定两个圆。

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

createRadialGradient()方法接受六个参数，x0和y0是辐射起始的圆的圆心坐标，r0是起始圆的半径，x1和y1是辐射终止的圆的圆心坐标，r1是终止圆的半径。

该方法的返回值也是一个CanvasGradient对象。

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

var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

上面代码中，生成辐射样式以后，用这个样式填充一个矩形。

createPattern()方法定义一个图像填充样式，在指定方向上不断重复该图像，填充指定的区域。

ctx.createPattern(image, repetition);

该方法接受两个参数，第一个参数是图像数据，它可以是<img>元素，也可以是另一个<canvas>元素，或者一个表示图像的 Blob 对象。第二个参数是一个字符串，有四个可能的值，分别是repeat（双向重复）、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(不重复)。如果第二个参数是空字符串或null，则等同于null。

该方法的返回值是一个CanvasPattern对象。

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

var img = new Image();
img.src = "https://example.com/pattern.png";
img.onload = function() {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

上面代码中，图像加载成功以后，使用createPattern()生成图像样式，然后使用这个样式填充指定区域。

阴影

以下属性用于设置阴影。

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

下面是一个例子。

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

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Canvas API：图像处理

CanvasRenderingContext2D.drawImage()

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

CanvasRenderingContext2D.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：图像在画布内部的高度，会产生缩放效果。

下面是最简单的使用场景，将图像放在画布上，两者左上角对齐。

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

var img = new Image();
img.src = "image.png";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

上面代码将一个 PNG 图像放入画布。这时，图像将是原始大小，如果画布小于图像，就会只显示出图像左上角，正好等于画布大小的那一块。

如果要显示完整的图片，可以用图像的宽和高，设置成画布的宽和高。

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

var image = new Image(60, 45);
image.onload = drawImageActualSize;
image.src = "https://example.com/image.jpg";

function drawImageActualSize() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
}

上面代码中，<canvas>元素的大小设置成图像的本来大小，就能保证完整展示图像。由于图像的本来大小，只有图像加载成功以后才能拿到，因此调整画布的大小，必须放在image.onload这个监听函数里面。

像素读写

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

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

（1）getImageData()

CanvasRenderingContext2D.getImageData()方法用来读取<canvas>的内容，返回一个 ImageData 对象，包含了每个像素的信息。

ctx.getImageData(sx, sy, sw, sh);

getImageData()方法接受四个参数。sx和sy是读取区域的左上角坐标，sw和sh是读取区域的宽度和高度。如果想要读取整个<canvas>区域，可以写成下面这样。

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

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

getImageData()方法返回的是一个ImageData对象。该对象有三个属性。

• ImageData.data：一个一维数组。该数组的值，依次是每个像素的红、绿、蓝、alpha 通道值（每个值的范围是 0 ～ 255），因此该数组的长度等于图像的像素宽度 x 图像的像素高度 x 4。这个数组不仅可读，而且可写，因此通过操作这个数组，就可以达到操作图像的目的。
• ImageData.width：浮点数，表示 ImageData 的像素宽度。
• ImageData.height：浮点数，表示 ImageData 的像素高度。

（2）putImageData()

CanvasRenderingContext2D.putImageData()方法将ImageData对象的像素绘制在<canvas>画布上。该方法有两种使用格式。

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

该方法有如下参数。

• imagedata：包含像素信息的 ImageData 对象。
• dx：<canvas>元素内部的横坐标，用于放置 ImageData 图像的左上角。
• dy：<canvas>元素内部的纵坐标，用于放置 ImageData 图像的左上角。
• dirtyX：ImageData 图像内部的横坐标，用于作为放置到<canvas>的矩形区域的左上角的横坐标，默认为 0。
• dirtyY：ImageData 图像内部的纵坐标，用于作为放置到<canvas>的矩形区域的左上角的纵坐标，默认为 0。
• dirtyWidth：放置到<canvas>的矩形区域的宽度，默认为 ImageData 图像的宽度。
• dirtyHeight：放置到<canvas>的矩形区域的高度，默认为 ImageData 图像的高度。

下面是将 ImageData 对象绘制到<canvas>的例子。

ctx.putImageData(imageData, 0, 0);

（3）createImageData()

CanvasRenderingContext2D.createImageData()方法用于生成一个空的ImageData对象，所有像素都是透明的黑色（即每个值都是0）。该方法有两种使用格式。

ctx.createImageData(width, height);
ctx.createImageData(imagedata);

createImageData()方法的参数如下。

• width：ImageData 对象的宽度，单位为像素。
• height：ImageData 对象的高度，单位为像素。
• imagedata：一个现有的 ImageData 对象，返回值将是这个对象的拷贝。

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

var imageData = ctx.createImageData(100, 100);

上面代码中，imageData是一个 100 x 100 的像素区域，其中每个像素都是透明的黑色。

CanvasRenderingContext2D.save()，CanvasRenderingContext2D.restore()

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

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

ctx.save();

上面代码中，save()会为画布的默认样式产生一个快照。

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

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

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

ctx.save();

ctx.fillStyle = "green";
ctx.restore();

ctx.fillRect(10, 10, 100, 100);

上面代码画一个矩形。矩形的填充色本来设为绿色，但是restore()方法撤销了这个设置，将样式恢复上一次保存的状态（即默认样式），所以实际的填充色是黑色（默认颜色）。

CanvasRenderingContext2D.canvas

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

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

ctx.canvas === canvas; // true

图像变换

以下方法用于图像变换。

• CanvasRenderingContext2D.rotate()：图像旋转
• CanvasRenderingContext2D.scale()：图像缩放
• CanvasRenderingContext2D.translate()：图像平移
• CanvasRenderingContext2D.transform()：通过一个变换矩阵完成图像变换
• CanvasRenderingContext2D.setTransform()：取消前面的图像变换

（1）rotate()

CanvasRenderingContext2D.rotate()方法用于图像旋转。它接受一个弧度值作为参数，表示顺时针旋转的度数。

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

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

上面代码会显示一个顺时针倾斜 45 度的矩形。注意，rotate()方法必须在fillRect()方法之前调用，否则是不起作用的。

旋转中心点始终是画布左上角的原点。如果要更改中心点，需要使用translate()方法移动画布。

（2）scale()

CanvasRenderingContext2D.scale()方法用于缩放图像。它接受两个参数，分别是x轴方向的缩放因子和y轴方向的缩放因子。默认情况下，一个单位就是一个像素，缩放因子可以缩放单位，比如缩放因子0.5表示将大小缩小为原来的 50%，缩放因子10表示放大十倍。

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

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

上面代码中，原来的矩形是 10 x 10，缩放后展示出来是 100 x 30。

如果缩放因子为 1，就表示图像没有任何缩放。如果为-1，则表示方向翻转。ctx.scale(-1, 1)为水平翻转，ctx.scale(1, -1)表示垂直翻转。

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

ctx.scale(1, -2);
ctx.font = "16px serif";
ctx.fillText("Hello world!", 20, -20);

上面代码会显示一个水平倒转的、高度放大 2 倍的Hello World!。

注意，负向缩放本质是坐标翻转，所针对的坐标轴就是画布左上角原点的坐标轴。

（3）translate()

CanvasRenderingContext2D.translate()方法用于平移图像。它接受两个参数，分别是 x 轴和 y 轴移动的距离（单位像素）。

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

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

（4）transform()

CanvasRenderingContext2D.transform()方法接受一个变换矩阵的六个元素作为参数，完成缩放、旋转、移动和倾斜等变形。

它的使用格式如下。

ctx.transform(a, b, c, d, e, f);
/*
a:水平缩放(默认值1，单位倍数)
b:水平倾斜(默认值0，单位弧度)
c:垂直倾斜(默认值0，单位弧度)
d:垂直缩放(默认值1，单位倍数)
e:水平位移(默认值0，单位像素)
f:垂直位移(默认值0，单位像素)
*/

下面是一个例子。

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

ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);

上面代码中，原始图形是 100 x 100 的矩形，结果缩放成 200 x 100 的矩形，并且左上角从(0, 0)移动到(50, 50)。

注意，多个transform()方法具有叠加效果。

（5）setTransform()

CanvasRenderingContext2D.setTransform()方法取消前面的图形变换，将画布恢复到该方法指定的状态。该方法的参数与transform()方法完全一致。

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

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

上面代码中，第一个fillRect()方法绘制的矩形，左上角从(0, 0)平移到(50, 50)。setTransform()方法取消了这个变换（已绘制的图形不受影响），将画布恢复到默认状态（变换矩形1, 0, 0, 1, 0, 0），所以第二个矩形的左上角回到(0, 0)。

<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类型的图像有效。

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

下面的例子将<canvas>图像复制成<img>图像。

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

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

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

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

canvas.toBlob(blobToImg);

Canvas 使用实例

动画效果

通过改变坐标，很容易在画布 Canvas 元素上产生动画效果。

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

var posX = 20;
var posY = 100;

setInterval(function() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  posX += 1;
  posY += 0.25;

  ctx.beginPath();
  ctx.fillStyle = "white";

  ctx.arc(posX, posY, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}, 30);

上面代码会产生一个小圆点，每隔 30 毫秒就向右下方移动的效果。setInterval()函数的一开始，之所以要将画布重新渲染黑色底色，是为了抹去上一步的小圆点。

在这个例子的基础上，通过设置圆心坐标，可以产生各种运动轨迹。下面是先上升后下降的例子。

var vx = 10;
var vy = -10;
var gravity = 1;

setInterval(function() {
  posX += vx;
  posY += vy;
  vy += gravity;
  // ...
});

上面代码中，x坐标始终增大，表示持续向右运动。y坐标先变小，然后在重力作用下，不断增大，表示先上升后下降。

像素处理

通过getImageData()方法和putImageData()方法，可以处理每个像素，进而操作图像内容，因此可以改写图像。

下面是图像处理的通用写法。

if (canvas.width > 0 && canvas.height > 0) {
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}

上面代码中，filter是一个处理像素的函数。以下是几种常见的filter。

（1）灰度效果

灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。

grayscale = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
  }
  return pixels;
};

上面代码中，d[i]是红色值，d[i+1]是绿色值，d[i+2]是蓝色值，d[i+3]是 alpha 通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以 3，再将结果写回数组。

（2）复古效果

复古效果（sepia）是将红、绿、蓝三种值，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。

sepia = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = r * 0.393 + g * 0.769 + b * 0.189; // red
    d[i + 1] = r * 0.349 + g * 0.686 + b * 0.168; // green
    d[i + 2] = r * 0.272 + g * 0.534 + b * 0.131; // blue
  }
  return pixels;
};

（3）红色蒙版效果

红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为 0。

var red = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = (r + g + b) / 3; // 红色通道取平均值
    d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为0
  }
  return pixels;
};

（4）亮度效果

亮度效果（brightness）是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。

var brightness = function(pixels, delta) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] += delta; // red
    d[i + 1] += delta; // green
    d[i + 2] += delta; // blue
  }
  return pixels;
};

（5）反转效果

反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255 - 原值）。

invert = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] = 255 - d[i];
    d[i + 1] = 255 - d[i + 1];
    d[i + 2] = 255 - d[i + 2];
  }
  return pixels;
};

推荐教程：《HTML教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!