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

Question

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

Answer 1

起初我持怀疑态度，但实现的一种方式几乎，通过使用CSS和getCSSCanvasContext()与WebKit的。这允许您将画布显示为背景，以便您可以像画布一样控制它。

例：

HTML

<header></header> 

CSS

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

的JavaScript（当文件就绪/ onload事件）

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

    // draw into canvas 
} 

一个完整的例子和更多的规格给出here。

希望这很方便。