有沒有辦法使用任何元素作爲畫布？

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。

希望這很方便。