Canvas 性能是一个非常值得关注的问题，这次用 Canvas 也同样遇到了需要性能优化的点：我们在之前使用 Canvas 实现了 background: cover 的效果，但是这导致了 resize 的反复绘制，CPU 使用率飙升。

使用离屏渲染

对于这种场景，MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。

- 阅读剩余部分 -

上回我们实现了 background 的效果，但是我们的代码只能达到一个填充缩放的效果，在不同的窗口大小，会导致图片的变形。如果是 background:cover 的效果则相当理想，它相当于需要我们把大的那一边居中对齐。

这里我们用到了使用图像 Using images 中的切片示例，简单的展示了如何处理：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

sx / sy / sWidth / sHeight 是对原图的操作，对于切下来的图片，dx / dy / dWidth / dHeight 是切好的图像对于画布的相对操作。

- 阅读剩余部分 -

上一回我们说到用 Canvas 去渲染图像，但是在高分屏中，我们会发现，同样的大小，在高分屏上显示的并不清晰，这个 demo 表示的非常清楚：https://jsfiddle.net/csvwolf/3gvs44vw/

为什么会这样

实际上我们在屏幕中看到的都是逻辑像素，但对于设备中元素的实际像素，是逻辑像素 * 设备像素比
，也可以叫做物理像素。

实际上在 Canvas 绘制时，也需要绘制实际像素，再进行画布的缩放。

解决方案

在 demo 中已经有了方案，先绘制逻辑像素 * 设备像素比大小的画布，用 CSS 把样式大小调整，这样实际上是把 canvas 像素点压缩到指定尺寸，但是这样字会变小，我们还需要利用缩放放大设备像素比倍的尺寸，让尺寸恢复正常。

这样一个支持高分屏的渲染就做完了。

接下来我们考虑，如果我们支持完高分屏，图片像素的坐标要怎么选定：答案是要扩大像素比倍进行选择，因为画布的像素点总数没有变化。

很惭愧，一点微小的实践经验，时间有限，就说这么多。

参考

• High DPI Canvas 高分辨率Canvas（译）

最近有一个需求，大致是要根据图片的背景色来切换前景色，也就是根据 background-color 的色值切换 color。

虽然这么一说，那么就能抽象出以下几个问题：

1. 如何取到图片某像素的 color 值，或者是某像素区域的平均 color 值
2. 如何根据 color 划分、如何改变前景的（如 icon、font）color。

- 阅读剩余部分 -