Question

我有一个可以用鼠标绘制的HTML5 Canvas。我希望能够清除画布，以便用户可以制作新的图纸。我这样做：

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

画布显示清晰，但只要用户开始新绘图，旧绘图就会重新出现。我用于鼠标绘图部分的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 = '#000000';
    myContext.strokeStyle = '#000000';
    myContext.fillRect(0, 0, 500, 700);
    myContext.lineWidth = 3;
    myContext.fill();
}

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

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

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

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

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

startCanvas();

HTML是：

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

Answer 1

myContext.strokeStyle = '#000000';
myContext.beginPath();//<---- add this and read about this.
myContext.fillRect(0, 0, 500, 700);
myContext.lineWidth = 3;  //why?
myContext.fill();

myContext.clearRect（0,0,500,700）;没有正确清理画布

1 个答案: