Canvas2D_willreadfrequency-CSDN博客

https://developer.chrome.com/blog/canvas2d/

在着色器、网格和滤镜的世界中，Canvas2D 可能不会让您兴奋。不可否认，在最先进的 2D 绘图方面，API 有点落后于时代。幸运的是，我们一直在努力在 Canvas2D 中实现新功能，以赶上 CSS、简化人体工程学并提高性能

1、CSS

CSS 有一些 Canvas2D 中非常缺少的绘图命令。通过新的 API，我们添加了一些最受欢迎的功能

1.1 圆角矩形

圆角矩形：互联网、计算、文明的基石。认真地说，圆角矩形非常有用：如按钮、聊天气泡、缩略图、对话气泡等等。在 Canvas2D 中制作圆角矩形总是可以的，之前有点麻烦，现在调用roundRect即可。

ctx.roundRect(10, 10, 200, 100, 20);

1.2 渐变

线性渐变：

const gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'magenta');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

径向渐变：

const radialGradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 70);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(0.5, 'magenta');
radialGradient.addColorStop(1, 'lightblue');

ctx.fillStyle = radialGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

二次梯度渐变：

const grad = ctx.createConicGradient(0, 100, 100);

grad.addColorStop(0, 'red');
grad.addColorStop(0.25, 'orange');
grad.addColorStop(0.5, 'yellow');
grad.addColorStop(0.75, 'green');
grad.addColorStop(1, 'blue');

ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);

1.3 文本编辑器

Chrome为Canvas2D文本渲染添加了几个新属性，这些属性都用相同的名称匹配对应的CSS。

2 优化

2.1 上下文重置

ctx.reset();

2.2 过滤器Filters

ctx.filter = new CanvasFilter([
  { filter: 'gaussianBlur', stdDeviation: 5 },
  {
    filter: 'convolveMatrix',
    kernelMatrix: [
      [-3, 0, 0],
      [0, 0.5, 0],
      [0, 0, 3],
    ],
  },
  { filter: 'colorMatrix', type: 'hueRotate', values: 90 },
]);

3 性能提升

3.1 快速读

使用getImageData()从画布读取像素数据，它可能很慢。新的API为您提供了一种显式标记画布以进行回读的方法(例如，用于生成效果)。这允许你优化底层的东西，并保持画布快速适应更多的用例。这个特性在Firefox中已经存在一段时间了，我们最终将其纳入canvas规范。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });

3.2 上下文丢失

如果客户端GPU内存耗尽或其他降临到你的画布上，你现在可以接收回调并根据需要重新绘制.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('contextlost', onContextLost);
canvas.addEventListener('contextrestored', redraw);

如果您想了解更多关于画布上下文和丢失的信息，在他们的wiki上有很好的解释。