Question

我是一名JavaScript初学者，想要创建我的第一个网站。

我有一个矩形，我想用鼠标在这个矩形内画另一个。

canvas.addEventListener("mousedown", function () {
    canvas.style.cursor = "ew-resize";

    startX = parseInt(event.clientX - offsetX);
    document.getElementById("info").innerHTML = "X position: " + startX;
});

canvas.addEventListener("mouseup", function () {
    canvas.style.cursor = "default";

    var mouseX = parseInt(event.clientX - offsetX);

    context.beginPath();
    context.rect(startX, 20, mouseX - startX, 50);
    context.fillStyle = "red";
    context.fill();

    document.getElementById("info").innerHTML = "X old: " + startX + " - X new :" + (mouseX) + " - Length: " + (mouseX - startX);
});

如果你尝试蓝色矩形，你会明白我想要的。问题是，如果我们点击我们释放鼠标的位置，则不会绘制新的矩形。它有一个偏移。

我不知道出了什么问题，可能是关于偏移和坐标的。但我已经尝试过其他人的实现，但它不能与我合作。

难道我正在搞乱像素和非像素吗？在CSS我有像素。

Answer 1

这里的主要问题是你只使用css设置画布的大小，这会导致拉伸问题。只要您考虑拉伸系数（缩放），这就可以了。如果在加载窗口后调整窗口大小，则还需要考虑画布的偏移量会发生变化，因此您需要使用以下代码启动事件。

var scale = canvas.attr("width") / canvas.width(),
    offsetX = $("#myCanvas").offset().left;

此外，您需要为此设置canvas宽度和高度属性才能正常运行。您可以将宽度设置为任何值，但数字越大，细节越好。

<canvas id="myCanvas" width="300" height="90">
    Your browser does not support the HTML5 canvas tag.
</canvas>

另一个提示是更多地使用jQuery函数进行事件处理，元素选择和属性设置。

var canvas = $("#myCanvas");
...
canvas.mouseup(function () {
    ...
    canvas.attr("cursor", "ew-resize");
    ...
});
...
canvas.mousedown(function () {
    ...
});

以下是功能小提琴http://jsfiddle.net/1mca6xqq/3/

的链接

用鼠标在JavaScript中绘制一个矩形

1 个答案: