Canvas 优化

在离屏 canvas 上预渲染相似的图形或重复的对象

如果发现在每个动画帧上重复了一些相同的绘制操作，请考虑将其分流到屏幕外的画布上。 然后，可以根据需要频繁地将屏幕外图像渲染到主画布上，而不必首先重复生成该图像的步骤。

myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);

Canvas 使用图像

引入图像到 canvas 中的基本操作：

• 获得一个指向 HTMLImageElement 的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片
• 使用 drawImage() 函数将图片绘制到画布上

获取绘制的图片

canvas 可以使用作为图片的源的类型：

• HTMLImageElement : 由 Image() 函数构造出来，或者任何的 <img> 元素。
• HTMLVideoElement : 用一个 HTML 的 <video> 元素作为图片源，可以从视频中抓取当前帧作为一个图像。
• HTMLCanvasElement : 使用另一个 <canvas> 元素作为图片源。
• ImageBitmap : 一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

Canvas 像素操作

ImageData 对象

ImageData 接口描述 <canvas> 元素的一个隐含像素数据的区域。

属性

• ImageData.data : 只读。Uint8ClampedArray 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。
• ImageData.height : 只读。无符号长整型（unsigned long），使用像素描述 ImageData 的实际高度。
• ImageData.width : 只读。无符号长整型（unsigned long），使用像素描述 ImageData 的实际宽度。

Canvas 变形

状态的保存和恢复 Saving and restoring state

• save() : 通过将当前状态放入栈中，保存 canvas 全部状态的方法。保存到栈中的绘制状态有下面部分组成：

  • 当前的变换矩阵。
  • 当前的剪切区域。
  • 当前的虚线列表.
  • 以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled

• restore() : 恢复画布(canvas)状态。在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。如果没有保存状态，此方法不做任何改变。

Canvas 合成与裁剪

globalCompositeOperation 设置图像混合模式

globalCompositeOperation = type : 设置 Canvas 图形的混合模式。

clip() 裁切路径

clip(fillRule) : 路径剪裁。使用的时候，先绘制剪裁路径，执行 clip() 方法，再绘制的内容就在这个剪裁路径中呈现。

• fillRule : 填充规则。
  • nonzero: 非零环绕原则，默认的原则。
  • evenodd: 奇偶环绕原则。

Canvas 基本动画

动画的基本步骤

• 清空 canvas ： 如果存在绘制的内容会完全清空 canvas （例如：背景图），否则需要清空所有。最简单的做法是使用 cleanRect() 方法。
• 保存 canvas 状态 : 如果一些设置（样式、变形之类的）会改变 canvas 状态，而在画每一帧的时候是原始状态，则需要使用 save() 方法先保存一下。
• 绘制动画图形（animated shapes） : 重绘动画帧。
• 恢复 canvas 状态 : 如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

Canvas 基础

Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas 与 svg 的区别

• Canvas 是基于像素的即时模式图形系统，绘制完对象后不保存对象到内存中，当再次需要这个对象时，需要重新绘制
• svg 是基于形状的保留模式图形系统，绘制完对象后会将其保存在内存中，当需要修改这个对象信息时，直接修改就可以了。

Canvas 添加样式

色彩 Colors

• fillStyle = color 设置图形填充的颜色
• strokeStyle = color 设置图形轮廓的颜色

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

ctx.strokeStyle = "orange";
ctx.strokeStyle = "#FFA500";
ctx.strokeStyle = "rgb(255,165,0)";
ctx.strokeStyle = "rgba(255,165,0,1)";

Canvas 绘制形状

绘制矩形

• fillRect(x, y, width, height) : 绘制一个填充的矩形。
  • x : 矩形起始点的 x 轴坐标
  • y : 矩形起始点的 y 轴坐标
  • width : 矩形的宽度。正值在右侧，负值在左侧。
  • height : 矩形的高度。正值在下，负值在上。
• strokeRect(x, y, width, height) : 绘制一个矩形的边框。
  • x : 矩形起始点的 x 轴坐标
  • y : 矩形起始点的 y 轴坐标
  • width : 矩形的宽度。正值在右侧，负值在左侧。
  • height : 矩形的高度。正值在下，负值在上。
• clearRect(x, y, width, height) : 清除指定矩形区域，让清除部分完全透明。
  • x : 矩形起始点的 x 轴坐标
  • y : 矩形起始点的 y 轴坐标
  • width : 矩形的宽度
  • height : 矩形的高度

Canvas 绘制文本

绘制文本

fillText() 填充指定的文本

fillText(text, x, y, [maxWidth]) : 在 (x, y) 位置填充文本 text 。如果提供了最大宽度 maxWidth ，文本会进行缩放以适应最大宽度。

• text : 使用当前的 font （绘制文字时，当前字体样式的属性）, textAlign （绘制文本时，文本的对齐方式的属性）, textBaseline （绘制文本时，当前文本基线的属性） 和 direction （绘制文本时，描述当前文本方向的属性） 值对文本进行渲染。
• x : 文本起点的 x 轴坐标。
• y : 文本起点的 y 轴坐标。
• maxWidth : 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。