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代码中加载“背景”图像并将其渲染到画布中，然后再渲染装饰：

Drawing Images into Canvas Tutorial

这样你的DOM就会更简单，你实际上可以与背景图像像素“互动”。

将画布放在<img/>元素上

2 个答案: