0

マウスで描画できるHTML5キャンバスがあります。ユーザーが新しい図面を作成できるように、キャンバスをクリアできるようにしたいと思います。私はこれを行います：

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>
4

1 に答える 1

2 
myContext.strokeStyle = '#000000';
myContext.beginPath();//<---- add this and read about this.
myContext.fillRect(0, 0, 500, 700);
myContext.lineWidth = 3;  //why?
myContext.fill();
于 2012-12-06T08:30:54.033 に答える