1

ユニオンドローのキャンバスを消去するためのクリアボタンを追加しようとしています

clearRectでそれができるはずだと思いました。私は試してみました：

function clearCanvas() {
    clearRect(0,0,canvas.width,canvas.height);
}

また

function clearCanvas(x,y,w,h) {
    ctx.clearRect(x,y,w,h);
}

...しかし、それは機能しません、なぜですか？

4

1 に答える 1

0

ctx.clearRect（0,0、canvas.width、canvas.height）を使用する場合の問題は、変換行列を変更した場合、キャンバスを適切にクリアできない可能性があることです。

ソリューション？キャンバスをクリアする前に、変換行列をリセットします。

//現在の変換行列を保存しますctx.save（）;

//キャンバスをクリアするときに単位行列を使用しますctx.setTransform（1、0、0、1、0、0）; ctx.clearRect（0、0、canvas.width、canvas.height）;

//変換を復元しますctx.restore（）;

編集：

Chromeは次のように適切に応答します：context.clearRect（x、y、w、h）; しかし、IE9はこの命令を完全に無視しているようです。IE9は次のように応答するようです。canvas.width=canvas.width; しかし、それは線をクリアするのではなく、形、写真、その他のオブジェクトだけをクリアします。

したがって、次のように作成されたキャンバスとコンテキストがある場合：

var canvas = document.getElementById（'my-canvas'）; var context = canvas.getContext（ '2d'）;

次のような方法を使用できます。

関数clearCanvas（context、canvas）{context.clearRect（0、0、canvas.width、canvas.height）; var w = canvas.width; canvas.width = 1; canvas.width = w; }

Edit2：

このコードを使用して、ブラウザがサポートしているかどうかを確認します。

function checkSupported() {
canvas = document.getElementById('canvas');
if (canvas.getContext){
  ctx = canvas.getContext('2d');
  // Canvas is supported
} else {
 // Canvas is not supported
 alert("We're sorry, but your browser does not support the canvas tag. Please use any web browser other than           Internet Explorer.");
}
}

また、Webページの読み込み時にこのコードを実行するには、bodyタグを次のように調整します。

<body onload="checkSupported();">
于 2012-04-19T22:04:41.513 に答える