46

私はbodyonmousemove関数でこのスクリプトを使用しています：

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/

4

4 に答える 4

93

「 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();
}
于 2013-04-16T11:12:02.990 に答える
7

ctx.clearRect（）はGoogleChromeでは正しく機能しないことに注意してください。私は関連する問題を解決するために何時間も費やしましたが、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);

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

于 2019-02-22T16:00:09.000 に答える
3

そして、beginPath（）とstroke（）を使用する必要があります。このコードはclearRect（...）と同じように機能します

ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();
于 2020-12-22T01:33:19.497 に答える
-4

試してみてくださいcontext.canvas.width = context.canvas.width：

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //context.clearRect(0, 0, context.width,context.height);
    context.canvas.width = context.canvas.width;
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

デモはこちら

于 2012-11-17T23:54:33.167 に答える