CSS Canvas 绘图
目前，可以在 CSS 中使用的图像集包括以下内容：
位图图像 (PNG, GIF, JPG)
SVG 图像
渐变
与显式 DOM 内容相比，一项显著缺失的能力是程序化地在 CSS 图像中进行绘图。<canvas> 元素表示一个可以通过程序化方式绘制的前景位图图像，但除了涉及<canvas>低效地使用toDataURL进行黑客操作外，一直没有办法绘制到 CSS 图像所使用的图像缓冲区中。
直到现在！
在最新的夜间构建版本中，您可以尝试一项新功能：在 CSS 中指定命名的图像缓冲区，然后通过 JavaScript 以编程方式在其中进行绘图。以下是它的工作原理：
background: -webkit-canvas(mycanvas);
您不再指定图像 URL，而是指定一个 canvas 及其要使用的标识符。然后，可以使用文档上的以下新 API 获取该 canvas 的绘图上下文：
CanvasRenderingContext getCSSCanvasContext(in DOMString contextType, in DOMString identifier, in long width, in long height);
每个文档对于给定的全局标识符只有一个 CSS canvas。当您获取绘图上下文时，也需要指定大小。只要您重复请求相同大小，canvas 将不会被清除。指定新大小等同于您调整 <canvas> 元素大小时所预期的行为，因此 canvas 缓冲区将被清除。
所有观察同名 CSS canvas 的对象都共享该 canvas。这意味着（类似于动画 GIF 的工作方式），您可以进行动画并在所有 canvas 客户端上同步发生。绘图更改将自动传播到所有客户端。
这是一个例子：