0

HTML5 ペイント アプリケーションに関するDev.Operaのチュートリアルに従い、座標をクリックした後に入力したいテキストをユーザーに求めるテキスト ツールを追加して改善しようとしています。

たとえば、ユーザーが座標 100,200 をクリックすると、表示するテキストを尋ねるプロンプトが表示され、ユーザーがテキストを入力した後、キャンバスに描画する必要があります。

このWebをロードするとテキストが表示されるため、ブラウザがキャンバスのfillTextとstrokeText関数をサポートしていることを知っていました。

私が従うチュートリアルでは、Dev.Opera は実際のキャンバスに一時キャンバスを作成し、画像 (図形とテキスト) が一時キャンバスに描画され、img_update() メソッドによって実際のキャンバスに転送されるようにします。

// This function draws the #imageTemp canvas on top of #imageView,
// after which #imageTemp is cleared. This function is called each time when the
// user completes a drawing operation.
function img_update () {
  contexto.drawImage(canvas, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
}

次のようなコンテキストでfillTextを実行しようとしました:

context.fillText(textVar, x, y);
img_update(); 

これはテキストを描画しませんが、次のようになります。

contexto.fillText(textVar, x, y);

完璧に描きます。プログラムを拡張して、円、ポリライン、および塗りつぶしを描画しましたが、それらはすべて、コンテキストで描画する必要なく、コンテキストで完全に機能します。

テキストを強制的にコンテキストで描画し、img_update() を使用して転送するにはどうすればよいですか?

4

1 に答える 1