javascript - 使用JavaScript在 Canvas 上的光标位置绘图

我试图通过单击并拖动鼠标在 Canvas 上绘制。我的问题是，除了线条质量很差(我想要更明显的边框)的事实外，它仅在鼠标指针位于0,0时才尊重鼠标的位置。当我将鼠标移到下角时，这条线与它之间的距离增加的幅度与我在 Canvas 中间时一样大，这条线已经离开了它。
我的代码在: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;
}

谢谢你的帮助!

最佳答案

您需要在 Canvas 上设置一个显式的width和height。 Canvas 的默认尺寸为宽度300和高度150(see the spec here)。通过CSS设置宽度和高度，就可以拉伸(stretch) Canvas 。

要么做:

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

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

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

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