使用JavaScript在画布上绘制鼠标位置的图形

Question

我正在尝试通过点击和拖动鼠标来在画布上绘制。我的问题是，除了线条质量很差（我希望有更明显的边界），它只在鼠标位置为0,0时才遵循。当我将鼠标移动到下角时，线条与中心相比距离增加了很多，线条已经超出了画布。 我的代码在这里：http://jsfiddle.net/ajTkP/12/

var MDown = false;
var Color = 'blue';

var Canvas = document.getElementById('canvas');
var Context = Canvas.getContext('2d');

Canvas.onselectstart = function() { return false; };
Canvas.unselectable = "on";
Canvas.style.MozUserSelect = "none";

Canvas.onmousedown = function(e) {
    MDown = true;
    Context.strokeStyle = Color;
    Context.lineWidth = 3;
    Context.lineCap = 'round';
    Context.beginPath();
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5);
}

Canvas.onmouseup = function() { MDown = false; };

Canvas.onmousemove = function(e) { 
    if (MDown) {
        Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5);
        Context.stroke();
    }
}

function Position(el) {
    var position = {left: 0, top: 0};
    if (el) {
        if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            position.left += el.offsetLeft;
            position.top += el.offsetTop;
        }
    }
    return position;
}

感谢您的帮助！

- ali

Answer 1

你需要在画布上设置明确的宽度和高度。画布的默认尺寸是宽300像素，高150像素（可以在这里查看规范）。通过使用CSS设置宽度和高度只是拉伸了画布。

要么执行以下操作：

<canvas id="canvas" width="300" height="200"></canvas>

或通过JavaScript设置宽度/高度：

canvas.width = 300;
canvas.height = 200;

请查看更新后的jsfiddle：http://jsfiddle.net/ajTkP/13/

- jimr

---

你救了一个人的命，上帝保佑你。有什么建议可以让这行代码更流畅吗？再次感谢！ - ali

顺便提一下，最好使用 window.onmousemove 来做这个，这样当你移出区域时，线条不会卡住。http://jsfiddle.net/DerekL/ajTkP/14/ - Derek 朕會功夫

Answer 2

看起来jimr比我更快地解决了画布高度和宽度的问题。

然而，线条质量差是由于你绘制线条的方式。你会注意到，在每个onmousemove事件中都调用了stroke()。请记住，它会跟踪从beginPath()到closePath()的线条路径，因此你基本上在多次描绘同一条线（每次鼠标移动时） 。这就是为什么你得到锯齿状（方块状）的线条，而不是你期望的平滑抗锯齿线条的原因。

- Zhihao

---

那么，当我鼠标抬起时，应该调用stroke()吗？如果这样做，我无法看到直线直到我松开鼠标。 - ali

我不知道是否有更好的方法，但你可以尝试保存之前的位置并执行 moveTo(previousPosition)，lineTo(currentPoisition) 和 stroke()。不过每条线之间可能会有间隙，所以你可能需要稍微调整一下。 - Zhihao

刚刚浏览了一些画布绘图应用程序教程，并发现了另一种方法。它基本上是每次鼠标移动时重新绘制整条线（尽管每次都会稍微长一点）。由于绘制得非常快，用户并不会注意到线条正在被重新绘制。虽然不太优雅，但它确实有效。 - Zhihao