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;
}

感谢您的帮助！

Answer 1

您需要在画布上设置明确的width和height。画布的默认尺寸为宽度300和高度150（see the spec here）。通过CSS设置宽度和高度，你只需要拉伸画布。

要么：

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

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

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

请参阅更新的jsfiddle：http://jsfiddle.net/ajTkP/13/

Answer 2

看起来jimr打击了我关于画布高度和宽度的打击。

线路质量差但是由于你如何划线。您会注意到，您在每次 onmousemove事件上都会调用stroke()。请记住，它会跟踪从beginPath()到closePath()时的线路，因此您基本上会多次抚摸同一条线（每次鼠标移动时）。这就是为您提供别名（看起来像块状）的线条，而不是您所期望的平滑抗锯齿线条。

使用JavaScript在画布上绘制光标位置

2 个答案: