入力キャンバスのテキストボックスとボタンボックスはどうですか？

私はキャンバスプログラミングを勉強しています。入力キャンバスのテキストボックスとボタンボックスはどうですか？

私はこの同じ写真を作る方法

...キャンバスは、テキスト配列と入力タイプのテキストを描くようにしようか？

HTMLコード：

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5:Canvas</title> 
</head> 
<body> 
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var Text_array = new Array("과자","모래","호두"); 

for(i=0; i<3; i++) 
{ 
    document.write(" " + Text_array[i]); 
} 

</script> 
</body> 
</html>

出典

2016-05-16 powerwltlr12

コードスニペットと質問は、互いに矛盾しているように見えます...質問を明確にし、より具体的にすることができますか？コードスニペットを表示するにはJSFiddleを使用してください。 – Farside

あなたが試したことを助けるためにここにありますが、あなたのためにコードを書くためにここにはありません。 – Rob

document.write文書にテキストを書き込みます。キャンバス要素に書き込む必要があります。キャンバスには、このための独自のメソッドが用意されています：fillTextとstrokeTextですので、これらのいずれかを使用する必要があります。

また、JavaScriptを呼び出す必要があります。下の私のコードでは、リンクのクリックから呼び出すのですが、onloadイベント、ボタンのクリックなどからも同様に呼び出すことができます。また、xとy座標を指定して、キャンバス。

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5:Canvas</title> 
<script type="text/javascript"> 
function writeCanvas() { 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font = "20px Arial"; 
    var Text_array = new Array("과자","모래","호두"); 

    for(i=0; i<3; i++) 
    { 
     ctx.fillText(Text_array[i], 10, (i+1) * 50); 
    } 
} 
</script> 
</head> 
<body> 
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas><br> 
<a href="javascript:writeCanvas();">Write</a> 


</body> 
</html>

出典

2016-05-16 13:06:51 Phil

ありがとうございます。しかし、もし私が作られたなら、これではありません。 – powerwltlr12

私はキャンバス側の入力テキストボックスと右側のボタン – powerwltlr12

を作成したいと思います。キャンバスを「余り」、「砂」、「ホー」と表示したいのですが、同じテキストを書き込むとテキストは削除されます。 – powerwltlr12

入力キャンバスのテキストボックスとボタンボックスはどうですか？

答えて

関連する問題