2

クリアボタンを実装しようとしていますが、機能していないようです。

x、y、ドラッグの位置と関連する色の配列があります。クリアボタンが押されたとき（そして、アラートボックスでチェックしたとき）、これらの配列をすべてクリアしてから、次のようにキャンバスをクリアします。

clickX.length = 0;
clickY.length = 0;
clickDrag.length = 0;
clickColor.length = 0;
var context = $('#canvas')[0].getContext('2d');
context.width = context.width;
context.height = context.height;

幅と高さの設定が遅いと聞いたので、いつも試しました。

context.clearRect(0, 0, context.width, context.height);

ただし、これらはいずれも機能していないようです。配列は空になりますが、キャンバスの以前のコンテンツはそのまま残ります。なぜクリアされないのかわからない。

読んでくれてありがとう。

4

2 に答える 2

13

コンテキスト.widthではなく、canvas要素のを使用する必要があります。

.widthコンテキストにプロパティがない.clearRectため、最後の2つのパラメーターの呼び出しは事実上ゼロに渡されます。

同様に、コンテキストに新しいプロパティを追加.widthしても何も起こりません。

これを行うだけ

var canvas = $('#canvas')[0]; // or document.getElementById('canvas');
canvas.width = canvas.width;

仕様に記載されているように（私の強調）：

キャンバス要素が作成されたとき、およびその後、幅と高さの属性が設定されたときはいつでも（新しい値または前の値に関係なく）、ビットマップと関連するコンテキストをクリアして初期状態に戻し、新しく指定したもので再初期化する必要があります座標空間の寸法。

.clearRect()クリッピングパスと塗りつぶしスタイルが考慮されることに注意してください。したがって、width属性を設定することが、キャンバスを元の状態に完全にリセットする唯一の方法です。ただし、クリッピングパスを使用したことがない場合は.clearRect()、より高速になる可能性があります。

于 2012-06-02T19:59:51.770 に答える
2

Alnitakの方法は1つの方法ですが、さらに情報を追加するために、幅を設定するとすべてのキャンバスの状態もリセットされることに注意する必要があります。つまり、フォント、スタイル、線幅などを再設定する必要があります。パフォーマンス上の理由から、これらをキャッシュすることをお勧めします（特に、設定が遅い場合を除いて、変更しないでくださいfont）。そうすることcanvas.width = canvas.widthが常に理想的であるとは限りません。

もちろんあります

ctx.clearRect(0, 0, canvas.width, canvas.height);

ただし、複雑な変換行列がある場合、これはあまり役に立ちません。その場合は、次の手順を実行することで、いつでも変換行列を一時的にリセットできます。

// I have lots of transforms right now
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Will always clear the right space
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
// Still have my old transforms
于 2012-06-02T22:12:20.893 に答える