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

谢谢你的帮助!

Answer 1

您需要设置一个明确的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/