有没有办法将任何元素用作画布？

Question

我看到使用<canvas>的示例在HTML中始终具有实际的canvas元素。比方说我已经有了一个我想要绘制的<header>元素，有没有办法直接将它用作画布？或者我是否需要添加该canvas元素并确保它填充标题？

Answer 1

我一开始就持怀疑态度，但有一种方法可以实现几乎，通过使用css和getCSSCanvasContext()与webkit。这允许您将画布显示为背景，以便您可以像画布一样控制它。

例如：

<强> HTML

<header></header>

<强> CSS

header { background: -webkit-canvas(fooBar); }

JavaScript （当文档就绪/上传时）

function fillCanvas(w, h) {
   var ctx = document.getCSSCanvasContext('2d', 'fooBar', w, h);

   // draw into canvas
}

完整示例和更多规范here。

希望这很方便。