2

これが私のプロジェクトです：http：//jsfiddle.net/fknjz/17/

キャンバスの下のテキストボックスに入力して[更新]をクリックすると、機能し、キャンバスにテキストが追加されます。ただし、[更新]をクリックするたびに、前に入力したコンテンツの上にテキストボックスのコンテンツが追加されます。そのため、キャンバス内のテキストは互いに積み重なっていきます。

必要なのは、キャンバス内のテキストを変更して、[更新]をクリックしたときに実際にテキストを更新し、古いテキストの上に新しいテキスト行を作成しないようにすることです。

それを行う方法はありますか？

4

2 に答える 2

8

キャンバスは単なるピクセルの集まりであることに注意してください。を呼び出すとfillText、キャンバスには文字が表示されず、一連のピクセルが表示されます。さらに、そのピクセルのセットは、別個のグループとしてすぐに失われます。キャンバスに「追加した特定のピクセルのセットを削除してください」と尋ねる方法はありません。

オプションは次のとおりです。

  • clearRectを使用して、図面の長方形のセクションを消去します。

  • canvas.width = canvas.width;キャンバスのピクセル状態を再初期化するために使用します。これには、キャンバス全体を再描画する必要がありますが、clearRectより正確になります。

将来の作業のために、図面のコンポーネントに関する状態を維持し、特定の要素を削除または変更できるキャンバス図面ライブラリの使用を検討することをお勧めします。

于 2012-06-06T16:22:54.503 に答える
1

次のようにキャンバスをクリアできます。

canvas.width = canvas.width;

更新されたフィドルを参照してください。キャンバスが完全にクリアされているため、毎回画像を再描画する必要があることに注意してください。

または、apsillersとJoceylnによって提案されているようにclearRect、canvasの方法を使用します。ただし、これには、クリアする長方形の面積を計算する必要があります。これは、ユーザーが入力するテキストの量に応じて変化する必要があり、背景に描画した画像のセクションが削除されます（常に白い背景になる場合の問題）。

于 2012-06-06T15:56:28.693 に答える