Question

我编写了一个JavaScript，允许用户在HTML5画布上绘制鼠标（类似于MS Paint）。

现在，我有两个问题：

绘图功能仅在HTML5画布元素位于网页的左上角（0,0）时才有效，否则它根本不起作用或者绘图偏离中心。
我无法删除图纸。当我擦除绘图时，它会在我再次开始绘制时删除但是它会回来。

我的代码如下：

HTML Canvas

<canvas id="can1" width="500" height="500"></canvas>1

用于画布绘制的JavaScript

// Variables
var x1;
var y1;
var isPressed = false;
var myCanvas;
var myContext;

function startCanvas() {

    // Canvas stuff
    myCanvas = document.getElementById("can1");
    myContext = myCanvas.getContext("2d");

    // Specify a black background, and white lines that are 3 pixels thick.
    myContext.fillStyle = '#fff';
    myContext.strokeStyle = '#fff';
    myContext.fillRect(0, 0, 500, 500);
    myContext.lineWidth = 3;
    myContext.fill();
}

function functionMouseDown(e) {
    // Get coordinates
    x1 = e.clientX
    y1 = e.clientY;

    isPressed = true;
}

function functionMouseMove(e) {
    // If mouse is down and moved start drawing line
    if (isPressed == true) {
        drawLine(e);
    }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
    //myContext.closePath();
    //myContext.stroke();
}

function drawLine(e) {
    // Draw line
    var x = e.clientX;
    var y = e.clientY;

    myContext.strokeStyle = '#cc0000';
    myContext.lineWidth = 1;
    myContext.moveTo(x1, y1);
    myContext.lineTo(x, y);
    myContext.stroke();

    // Set start coordinates to current coordinates
    x1 = x;
    y1 = y;
}

我用来擦除画布的JavaScript：

myContext.clearRect(0, 0, 500, 500);

Answer 1

我使用以下函数来完成此操作

function relMouseCoords(event){/*needs fixing for general case*/
    var totalOffsetX = 0
    var totalOffsetY = 0
    var canvasX = 0
    var canvasY = 0
    var currentElement = this

    do{
        totalOffsetX += currentElement.offsetLeft
        totalOffsetY += currentElement.offsetTop
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX
    canvasY = event.pageY - totalOffsetY

    return {x:canvasX, y:canvasY}
}

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

然后

var cord = e.target.relMouseCoords(e);
x1 = cord.x; 
y1 = cord.y;
...
var cord = e.target.relMouseCoords(e);
var x = cord.x;
var y =cord.y;

http://jsfiddle.net/mowglisanu/u3rvT/1/

Answer 2

最简单的解决方案是使用myCanvas.offsetLeft和myCanvas.offsetTop设置画布的偏移集。

画布绘制中心，擦除无法正常工作

2 个答案: