Canvas

canvas 优缺点

优点：

1. Canvas 能够以.png 或者.jpg 格式保存结果图像

2. Canvas 最适合图像密集型的游戏

缺点：

1. Canvas 依赖分辨率

2. Canvas 不支持事件处理

3. Canvas 弱文本渲染能力

局部重绘

Canvas 局部刷新的方案：

1. 清除指定区域的颜色，并设置 clip

2. 所有同这个区域相交的图形重新绘制

要实现局部渲染时，需要考虑的两个因素是：

1. 单次刷新时影响的范围最小

2. 刷新的图形不会影响其他图形的正确绘制

canvas 相关问题

Canvas 和 SVG 的区别

1. 绘制方式不同

canvas 通过 js 来绘制 2D 图形，svg 使用 xml 来描述 2D 图形

2. canvas 绘画出来的图形一般成为位图，也就是放大缩小的情况下会出现失真的情况，svg 绘制的图形是矢量图，不存在失真的情况

3. canvas 绘制的图形不会出现在 DOM 结构中，svg 绘制的会存在于 DOM 结构

4. canvas 不支持事件处理器，svg 支持事件处理器

5. canvas 的文本渲染能力弱，svg 中的文字独立于图像，文字可保留，可编辑和可搜索

6. canvas 依赖于分辨率，svg 不依赖分辨率

7. canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。

8. 性能差异

从底层来看，Canvas 的性能受画布尺寸影响更大，而 SVG 的性能受图形元素个数影响更大。

9. 适用场景不同

Canvas 提供的绘图能力更底层，适合做到像素级的图形处理，能动态渲染和绘制大数据量的图形

而且在小数据量的情况下，SVG 的方案通常内存占用会更小，做缩放、平移等操作的时候往往帧率也更高。

小画布、大数据量的场景适合用 Canvas，譬如热力图、大数据量的散点图等

画布非常大，有缩放、平移等高频的交互，或者移动端对内存占用量非常敏感等场景，可以使用 SVG 的方案

canvas 最适合图像密集型的游戏，其中的许多对象会被频繁重绘，svg 不适合游戏应用

canvas 图片跨域问题

问题描述：正常情况下，如果需要将绘制好的图像输出，我们可以调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 方法来获取到图像数据。然而，会遇到图片跨域的问题

原因：为避免未经许可拉取远程网站信息而导致的用户隐私泄露（如 GPS 等信息，具体可搜索 Exif），在调用 canvas 的 toBlob(), toDataURL() 或 getImageData() 会抛出安全错误:

解决方案：

使用 canvas.toDataUrl 跨域的解决方式就是在设置 img.crossOrigin = "Anonymous"; 方法。

然后在服务器端设置请求头"Access-Control-Allow-Origin": "*"。

crossOrigin 兼容性：IE11+(IE Edge)，Safari，Chrome，Firefox 浏览器均支持，IE9 和 IE10 会报 SecurityError 安全错误

参考：解决 canvas 图片 getImageData,toDataURL 跨域问题 (opens new window)