Question

如果项目有偏见，则不绘制任何内容。

JavaScript的：

var ctx = document.getElementById("drawing").getContext("2d");

$("#drawing").mousemove(function(e) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
});

var ctx_without_offset = document.getElementById("without_offset").getContext("2d");

$("#without_offset").mousemove(function(e) {
    ctx_without_offset.lineTo(e.clientX, e.clientY);
    ctx_without_offset.stroke();
});

CSS：

#drawing {
    border: 1px solid #000;
    position: absolute;
    top: 50px;
    right: 0;
}
#without_offset {
    border: 1px solid #000;
}

如何解决？提前谢谢。

Answer 1

您的问题来自于如何获得鼠标位置。

clientX和clientY返回相对于页面的鼠标位置。

我不知道jQuery是否有东西可以获得正确的坐标，但你可以试试这个：

.lineTo(e.clientX - this.offsetLeft, e.clientY - this.offsetTop);

Answer 2

你必须“标准化”指针坐标，如：

var ctx = document.getElementById("drawing").getContext("2d"),
    ctx_rect= ctx.canvas.getBoundingClientRect();

$("#drawing").mousemove(function(e) {
    ctx.lineTo(e.clientX - ctx_rect.left, e.clientY - ctx_rect.top);
    ctx.stroke();
});

在这种情况下，您将拥有相对于画布的指针坐标。演示：http://jsfiddle.net/BuDpz/。另请注意，计算每个鼠标移动的偏移量可能会影响性能。这就是为什么最好一次计算它，保存值并在以后按需更新它们。

Answer 3

画布上的坐标以及clientX和clientY的坐标具有不同的来源。这个版本重新对齐它们：

function makeDrawFunction(elem) {
    var context = elem.getContext('2d');
    return function(e) {
        var offset = $(elem).offset();
        context.lineTo(e.clientX - offset.left, e.clientY - offset.top);
        context.stroke();
    }
}


$("#drawing").mousemove(makeDrawFunction(
  document.getElementById("drawing")
));

$("#without_offset").mousemove(makeDrawFunction(
  document.getElementById("without_offset")
));

live demo

Answer 4

使用将处理滚动偏移的pageX和pageY，然后减去画布的偏移位置，就是这样。试试吧： http://jsfiddle.net/9UyxF/14/

var ctx = document.getElementById("drawing").getContext("2d");

$("#drawing").mousemove(function(e) {
    var pos = $(this).offset();
    ctx.lineTo(e.pageX - pos.left, e.pageY - pos.top);
    ctx.stroke();
});

var ctx_without_offset = document.getElementById("without_offset").getContext("2d");

$("#without_offset").mousemove(function(e) {
    var pos = $(this).offset();
    ctx_without_offset.lineTo(e.pageX - pos.left, e.pageY - pos.top);
    ctx_with

Answer 5

你也必须寻找元素的偏移量。您可以找到更新的小提琴here。因为我很匆忙，所以它快速而肮脏，但它确实有效。

$("#without_offset").mousemove(function(e) {
    var left = e.clientX - $("#without_offset").offset().left;
    var top = e.clientY - $("#without_offset").offset().top;
    ctx_without_offset.lineTo(left, top);
    ctx_without_offset.stroke();
});

具有偏移的画布元素

5 个答案: