鼠标在画布上的位置 [英] Mouse position on canvas painting

问题描述

下面的代码正确绘制，但它绘制错误的坐标。它应该画鼠标的地方。我不能发现我的错误。谢谢。

The code below paints correctly but it paints to wrong coordinates. It should paint the place where the mouse is. I was not able to discover my mistake. Thanks.

JSFIDDLE

container.mousedown(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    context_temp.beginPath();
    context_temp.moveTo(x, y);
    started = true;
});

container.mousemove(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        context_temp.lineTo(x, y);
        context_temp.stroke();
    }
});

container.mouseup(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        container.mousemove(x, y);
        started = false;
        update();
    }
});

推荐答案

您正在CSS中设置画布宽度和高度。那只是伸展画布和图像一样。

You're setting your canvas width and height in CSS. That just stretches the canvas the same as it would an image.

效果是绘制在错误的地方。

The effect is drawing in the wrong place.

而是需要在标签上设置画布尺寸本身：

Instead you need to set your canvas dimensions on the tag itself:

<canvas width="400" height="400"></canvas>

这篇关于鼠标在画布上的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！