让我们一起学Canvas API-CanvasGradient、CanvasPattern、ImageBitmap和ImageData的属性和方法

1. CanvasGradient

CanvasGradient 接口表示描述渐变的不透明对象。通过 CanvasRenderingContext2D.createLinearGradient() 或 CanvasRenderingContext2D.createRadialGradient() 的返回值得到。

该接口没有暴露属性，不透明对象。

CanvasGradient.addColorStop()

void gradient.addColorStop(offset, color);

CanvasGradient.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到1之间，将抛出INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的 CSS 颜色值 <color>，将抛出SYNTAX_ERR错误。

参数：

• offset： 0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误

• color： CSS 颜色值 <color>。如果颜色值不能被解析为有效的 CSS 颜色值 <color>，将抛出SYNTAX_ERR错误。

以下例子：

html

 <canvas id="canvas"></canvas>

javaScript

var canvas = document.getElementById("canvas");
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);

2. CanvasPattern

CanvasPattern 接口表示描述一个模板（基于 image、canvas 或 video）的不透明对象，通过 CanvasRenderingContext2D.createPattern() 方法创建。

不透明对象，该接口没有暴露属性。

setTransform()

CanvasPattern.setTransform() 方法使用 DOMMatrix 对象作为图案的变换矩阵，并在此图案上调用它。

setTransform(matrix)

参数：

• matrix：DOMMatrix，被用作图案的变换矩阵。

使用 setTransform 方法创建一个来自 DOMMatrix具有指定图案变化的CanvasPattern。如例子所示，如果你把图案赋值给当前的 fillStyle，当你使用fillRect() 方法时，图案会被应用到 canvas 上绘制出效果。

html

<canvas id="canvas"></canvas>
<svg id="svg1"></svg>

javaScript

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

var svg1 = document.getElementById("svg1");
var matrix = svg1.createSVGMatrix();

var img = new Image();
img.src = 'canvas_createpattern.png';

img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,400,400);
};

3. ImageBitmap

ImageBitmap 接口表示能够被绘制到 <canvas> 上的位图图像，具有低延迟的特性。运用 createImageBitmap() 工厂方法模式，它可以从多种源中生成。 ImageBitmap提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。

相关属性

• ImageBitmap.height 只读。无符号长整型数值，表示 ImageData 的 CSS 像素单位的高度。

• ImageBitmap.width 只读。无符号长整型数值，表示 ImageData 的 CSS 像素单位的宽度。

实例方法 close()

释放与 ImageBitmap 关联的所有图形资源。

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

const bitmap = offscreen.transferToImageBitmap();
// ImageBitmap { width: 256, height: 256 }

bitmap.close();
// ImageBitmap { width: 0, height: 0 } — disposed

4. ImageData

ImageData 接口描述 <canvas> 元素的一个隐含像素数据的区域。使用 ImageData()构造函数创建或者使用和 canvas 在一起的 CanvasRenderingContext2D 对象的创建方法： createImageData() 和 getImageData()。也可以使用 putImageData() 设置 canvas 的一部分。

构造函数

ImageData() 构造函数返回一个新的实例化的 ImageData 对象，此对象由给定的类型化数组和指定的宽度与高度组成。

这个构造器是创建像这种对象首选的方式。

new ImageData(array, width, height);
new ImageData(width, height);

参数：

• array： 包含图像隐藏像素的 Uint8ClampedArray 数组。如果数组没有给定，指定大小的黑色矩形图像将会被创建。

• width：无符号长整型（unsigned long）数值，描述图像的宽度。

• height：无符号长整型（unsigned long）数值，描述图像的高度。 如果已给定数组，这个值是可选的：它将通过它的大小和给定的宽度进行推断。

var imageData = new ImageData(100, 100); // Creates a 100x100 black rectangle
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }

实例属性

• colorSpace
• data：只读的 ImageData.data 属性，返回 Uint8ClampedArray ，描述一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。
• width：只读的 ImageData.width 属性，返回在图像数据对象中每一行像素的数量。
• hight：只读的 ImageData.height 属性，返回在图像数据对象中的行的数量。