Question

我正在尝试在加载的图像上绘制一些东西。但是，出于某种原因，画布下方的图像不在顶部。我这样做：

我有以下容器：

<div id="container">
    <img src="{{url_for('static', filename='nature.jpg')}}" id="target" style="zIndex=1">
</div>>

我正在尝试按如下方式添加画布：

  window.onload = function() {
    var img = document.getElementById('target');
    var width = img.naturalWidth;
    var height = img.naturalHeight;

    var canvas = document.createElement('canvas'); //Create a canvas element
    //Set canvas width/height
    canvas.style.width=width;
    canvas.id = 'mycanvas';
    canvas.style.height=height;
    //Set canvas drawing area width/height
    canvas.width = width;
    canvas.height = height;
    //Position canvas
    canvas.style.position='absolute';
    canvas.style.left=0;
    canvas.style.top=0;
    canvas.style.zIndex=100000;
    canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
    $('#container').append(canvas);
}

但是，画布显示在图像下方而不是顶部。我做错了什么？

感谢

Answer 1

您对内联样式style="zIndex=1"使用了错误的语法，它应该是style="z-index: 1"，仍然需要z-index才能使其元素需要{{1}以外的位置1}}

在这种情况下，由于static没有位置，您实际上可以将img全部放在一起，因为画布的位置为z-index，并且会在顶部分层仅仅因为那个图像。

要position: absolute相对于canvas定位，container需要一个位置，即container

无法将画布放在图像上

1 个答案: