4

我正在尝试通过单击并拖动鼠标来绘制画布。我的问题是，除了这条线的质量很差（我想要一个更明显的边框）之外，它只在鼠标位置为 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;
}

谢谢你的帮助！

4

2 回答 2

9

您需要在画布上设置一个明确的width和。height画布的默认尺寸是 300 的宽度和 150 的高度（请参阅此处的规范）。通过 CSS 设置宽度和高度，您只是在拉伸画布。

要么做：

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

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

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

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

于 2012-06-16T01:54:44.117 回答
1

看起来 jimr 在画布的高度和宽度方面击败了我。

线的质量很差是由于你画线的方式。您会注意到您正在调用stroke()每个onmousemove事件。请记住，它会跟踪从 when youbeginPath()到 when you的线条路径closePath()，因此您基本上是在多次抚摸同一条线（每次鼠标移动）。这就是为您提供锯齿（看起来像块状）线的原因，而不是您期望的平滑抗锯齿线。

于 2012-06-16T02:04:32.333 回答