Question

我有一个简单的画布绘图程序，可以很好地工作。

但是当我想在我的网页上使用它时，我必须定位它。我需要canvas元素在1 div元素内部，我需要将div元素放在css中。当我更改父div元素的位置时，我的画布窗口会定期移动，但是当我尝试绘制时，光标的鼠标位置与屏幕上的线不匹配。

我想知道如何解决这个问题以及如何将我的画布窗口正确放置在我想要的位置。

这是有效的画布程序（颜色按钮定位不好，但没有明确）。 HjD7e - ＆gt; jsfiddle id 这是一个混乱的（光标位置不匹配） S6Dhe - ＆gt; jsfiddle id

Answer 1

由于您现在正在抵消多个元素，因此您需要考虑新的职位。看到您正在定位父容器时，可能更容易将所有定位放在那里并从画布本身移除额外的定位。使用：

#contain{
    position:absolute;
    top:300px;
    left:500px;
    width: 400px;
    height: 400px
    }

代替。从那里，将位置的代码更改为：

contain = document.getElementById('contain');
currX = e.clientX - contain.offsetLeft + window.scrollX;
currY = e.clientY - contain.offsetTop + window.scrollY;

还考虑了窗口中的滚动。

工作小提琴是here。（警告，只在Firefox中测试过）

在css中更改canvas元素父div的位置会扭曲绘图

1 个答案: