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() を使用して転送するにはどうすればよいですか?