web-dev-qa-db-ja.com

clearRect関数はキャンバスをクリアしません

このスクリプトをbody onmousemove関数で使用しています：

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

マウスを動かすたびにキャンバスをクリアして新しい線を描くはずですが、正しく機能しません。私はjQuery、マウスリスナーなどを使用せずにそれを解決しようとしています。

これがデモです： https://jsfiddle.net/0y4wf31k/

javascriptlinedrawclearonmousemove
31
Juan C. Roldán

"beginPath（）"を使用する必要があります。それだ。

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}
61
aviomaksim

Ctx.clearRect（）はnotがGoogle Chromeで適切に機能することに注意してください。私は関連する問題を解決するために何時間も費やしましたが、Chromeでそれを見つけるためだけでした。長方形をrgba（0、0、0、0）で埋める代わりに、それは実際に長方形をrgba（0で埋めます、0、0、1）代わりに！

したがって、必要な透明な黒いピクセルで長方形を適切に塗りつぶすには、代わりにChromeでこれを行う必要があります。

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

もちろん、これはHTML5 Canvasオブジェクトの適切なサポートを提供するすべてのブラウザーで動作するはずです。

1
David Edwards