1

私は、HTML5 Canvas を使用した一種の名刺メーカーに取り組んでいます。カスタムの名前、住所などを取得するには、現在 PROMPT Box を使用しています...

今私が得たものは次のとおりです。

変数を定義するには

var name = prompt("Votre nom","")
var address = prompt("Votre adresse","")
var title = prompt("Votre titre","")

次に、キャンバスに描画します。

img.onload = function(){
oCtx.drawImage(img,0,0);

oCtx.font = "normal 25px arial";     // different font
oCtx.textBaseline = "top";           // text baseline at the top
oCtx.fillStyle = "#00529e";
oCtx.fillText(address, 283, 138);

oCtx.font = "bold 45px arial";     // different font
oCtx.fillText(name, 283, 350);

oCtx.font = "normal 40px arial";     // different font
oCtx.fillText(title, 283, 410);
};
img.src="back.png";

PROMPT ボックスから値を取得することはうまく機能しています。しかし、代わりにユーザーのテキストボックスをよりクリーンにしたいと思います。

したがって、Canvas の横にあるテキスト ボックスに入力するだけで、テキスト ボックスに入力すると、「名前」変数、「アドレス」、または「タイトル」の内容が自動的に更新されます。

どうすればこれを機能させることができますか？

編集

これが私が試したものです...しかし、それは機能していません:

<input type="text" id="testing"/>

このテキストボックスに入力してから更新します：

oCtx.fillText(document.getElementById('testing').value), 282, 138);

現在、それは次のとおりです。

oCtx.fillText(address, 282, 138);

ありがとう

編集2

私は試した ：

document.getElementById("testing").addEventListener("change", function() {
    var val = document.getElementById("testing").value;
    // now use val in your existing fillText code
});

「testing」はテキストボックスのIDです...そして、fillTextを次のように変更しました:

oCtx.fillText(val, 282, 138);

しかし、テキストボックスに入力しても何も起こりません...理由は何ですか?

4

2 に答える 2

0

テキスト領域でハンドラーを使用keypressします。

document.getElementById("mytextbox").addEventListener("keydown", function() {
    var val = document.getElementById("mytextbox").value;
    // now use val in your existing fillText code
});

changeイベントの代わりにイベントをkeydown使用することもできますがchange、ユーザーがフォーカスをテキストボックスから離した後にのみ起動することに注意してください。keypressイベントはと同様に機能しますがkeydown、バックスペースをキャッチしません。

それはあなたが始めるはずです！

于 2012-05-25T15:58:59.353 に答える
0

キーダウン イベントなどから新しい値を取得したら、キャンバスをクリアして再描画する必要があります。

そう

OCtx.clearRect ( x 、 y 、 w 、 h );

//最初に使用したコードを新しい値で再実行します

于 2014-08-16T09:06:37.377 に答える