將畫布放在 <img> 元件

Question

我想使用CSS將html5提供的畫布放置在圖像元素上。 但是我無法將畫布放在圖像上。 你能幫我這個忙嗎？

Answer 1

嘗試：

HTML

<div id="container">
    <img ...>
    <canvas ...>
</div>

CSS

#container {
    position:relative;
}
#container > img,
#container > canvas {
    position:absolute;
    left:0;
    top:0;
}

（可選）設置使用CSS加載圖片的背景：

canvas {
    background:url(yourImage.png);
}

或使用JS將圖像直接繪制到畫布中：

var img = new Image,
    ctx = documment.getElementById('canvasId').getContext('2d');

img.onload = function() {
    ctx.drawImage(this, 0, 0);
    /// continue from here...
}
img.src = 'yourImage.png';

Answer 2

如果兩個圖像的大小相同，則替代解決方案是僅創建畫布圖像，而不創建HTML圖像。 在Javascript代碼中，在渲染裝飾之前，加載“背景”圖像並將其渲染到畫布中：

將圖像繪制到畫布教程中

這樣，您的DOM就變得更加簡單，您實際上可以與背景圖像像素進行“交互”。