让我们一起学Canvas API-HTMLCanvasElement，操纵画布元素的属性、方法和相关事件

1.概述

HTMLCanvasElement接口是提供用于操纵<cancas>元素的布局和表示的属性和方法。

2. 属性

该接口有两个相关属性。

• height

HTMLCanvasElement.height 属性是一个正整数 ，使用了<canvas> 元素的 HTML 属性height来反映该元素高度的 CSS 像素值。当该属性没有被定义，或被定义为一个无效值（如负值）时，将使用150作为它的默认值。

html

<canvas id="canvas" width="300" height="300"></canvas>

javaScript

var canvas = document.getElementById('canvas');
console.log(canvas.height); // 300

通过上面的代码得到 canvas 的高度。

• width

HTMLCanvasElement.width 属性是一个对应 <canvas> 元素 CSS 像素 width 的正整数。当这个属性没有指定时，或者被赋予一个不合法的值，比如一个负值，默认使用 300。

html

<canvas id="canvas" width="300" height="300"></canvas>

javaScript

var canvas = document.getElementById('canvas');
console.log(canvas.width); // 300

通过上面的代码得到 canvas 的宽度。

3. 方法

captureStream()

该方法还有很多浏览器不兼容而且未来还会进行修改。
HTMLCanvasElement.captureStream()  方法返回的 CanvasCaptureMediaStream 是一个实时视频捕获的画布。

MediaStream = canvas.captureStream(frameRate);

参数：

• frameRate 可选。 设置双精准度浮点值为每个帧的捕获速率。如果未设置，则每次画布更改时都会捕获一个新帧。如果设置为0，则会捕获单个帧。

返回值是一个对一个 MediaStream 对象的引用。

//获取所需要截取媒体流的 canvas element
var canvasElt = document.querySelector('canvas');

//截取到媒体流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用 RTCPeerConnection 来传输给其他的电脑
// 下面的 pc 是其他地方创建的一个 RTCPeerConnection
pc.addStream(stream);

getContext()

HTMLCanvasElement.getContext()  方法返回canvas 的上下文，如果上下文没有定义则返回 null.

在同一个 canvas 上以相同的 contextType 多次调用此方法只会返回同一个上下文。

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

参数：
contextType，上下文类型，是一个指示使用何种上下文的 DOMString。
可能值如下：

• "2d"", 建立一个 CanvasRenderingContext2D二维渲染上下文。
• "webgl" (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
• "webgl2" (或 “experimental-webgl2”) 这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。实验性
• "bitmaprenderer" 这将创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext。

上下文属性 (contextAttributes)，可以在创建渲染上下文的时候设置多个属性。
例如：

canvas.getContext("webgl",
                 { antialias: false,
                   depth: false });

返回值是以下几个对象：

• CanvasRenderingContext2D,contextType为2d。
• WebGLRenderingContext,contextType为"webgl"或"experimental-webgl"。
• WebGL2RenderingContext,contextType为"webgl2"或"experimental-webgl2"。
• ImageBitmapRenderingContext,contextType为"bitmaprenderer"。

如果 contextType 不是上述之一，返回null。

<canvas id="canvas" width="300" height="300"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }

toBlob()

HTMLCanvasElement.toBlob()  方法创造 Blob 对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地。

可以在调用时指定所需的文件格式和图像质量，若未指定文件格式（或不支持指定的文件格式），则默认导出 image/png 类型。浏览器需要支持 image/png，大多数浏览器还支持额外的图片格式，包括 image/jpeg 和 image/webp。

对于支持以指定分辨率编码的图片格式，如不特别指明，图片的默认分辨率为 96dpi。

toBlob(callback, type, quality)

参数解析：

• callback回调函数，可获得一个单独的 Blob 对象参数。如果图像未被成功创建，可能会获得 null 值。

• type 可选。DOMString 类型，指定图片格式，默认格式（未指定或不支持）为 image/png。

• quality 可选。Number 类型，值在 0 与 1 之间，当请求图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。

无返回值。

如下例子：

将 canvas 图像转换为文件

当一个内容画到 canvas 上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了 id 为“canvas”的 <canvas> 元素中的图像，复制成一个 PNG 图，在文档中加入一个新的 <img> 元素，这个 <img> 元素的源图就是使用 canvas 创建的那个图像。

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
   
    URL.revokeObjectURL(url);
  };

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

注意，我们这里创建的是 PNG 图片；如果在 toBlob() 传入第二个参数，就可以指定图片格式。例如，生成 JPEG 格式的图片：

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

toDataURL()

HTMLCanvasElement.toDataURL()  方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为 96dpi。

• 如果画布的高度或宽度是 0，那么会返回字符串“data:,”。
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
• Chrome 支持“image/webp”类型。

canvas.toDataURL(type, encoderOptions);

参数：

• type 可选。图片格式，默认为 image/png

• encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值是包含data URI 的DOMString。

<canvas id="canvas" width="5" height="5"></canvas>

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

设置图片质量

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

transferControlToOffscreen()

方法 HTMLCanvasElement.transferControlToOffscreen()  将控制转移到一个在主线程或者 web worker 的 OffscreenCanvas 对象上。
该方法还在改进兼容其他浏览器。

OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()

无参数，返回一个OffscreenCanvas 对象。

var htmlCanvas = document.createElement('canvas');
var offscreen = htmlCanvas.transferControlToOffscreen();
var gl = offscreen.getContext('webgl');

// ... some drawing using the gl context ...

// Push frames back to the original HTMLCanvasElement
gl.commit();

回调相关事件

contextlost()

2d画布上下文canvasContext由于某种原因丢失或者不存在时，就会触发该事件。

addEventListener("contextlost", (event) => {});

oncontextlost = (event) => {};

如下例子：

const canvas = document.getElementById("canvas");

canvas.addEventListener("contextlost", (event) => {
  event.preventDefault();
});

contextrestored()

2d画布上下文被还原后，触发该事件。

addEventListener("contextrestored", (event) => {});

oncontextrestored = (event) => {};

例子如下：

const canvas = document.getElementById("canvas");

canvas.addEventListener(
  "contextrestored",
  (e) => {
    console.log(e);
    // call to redrawCanvas() or similar
  },
  false
);

webglcontextcreationerror()

当客户端不能创建WebGLRenderingContext 的上下文时，触发该事件。

addEventListener("webglcontextcreationerror", (event) => {});

onwebglcontextcreationerror = (event) => {};

例子如下：

const canvas = document.getElementById("canvas");

canvas.addEventListener(
  "webglcontextcreationerror",
  (e) => {
    console.log(e.statusMessage || "Unknown error");
  },
  false
);

const gl = canvas.getContext("webgl");
// logs statusMessage or "Unknown error" if unable to create WebGL context

webglcontextlost()

当客户端创建的webglcontext上下文丢失或者不存在时，触发该事件。

addEventListener("webglcontextlost", (event) => {});

onwebglcontextlost = (event) => {};

例子如下：

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener("webglcontextlost", (event) => {
  console.log(event);
});

gl.getExtension("WEBGL_lose_context").loseContext();

// "webglcontextlost" event is logged.

webglcontextrestored()

当客户端创建的webglcontext还原后，触发该事件。

addEventListener("webglcontextrestored", (event) => {});

onwebglcontextrestored = (event) => {};

例子如下：

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextrestored",
  (e) => {
    console.log(e);
  },
  false
);

gl.getExtension("WEBGL_lose_context").restoreContext();

// "webglcontextrestored" event is logged.

总结

以上就是canvas的HTMLCanvasElement接口的详细解析，参考链接：HTMLCanvasElement - Web APIs | MDN (mozilla.org)