「JavaScript/Canvas」の版間の差分
削除された内容 追加された内容
編集の要約なし |
編集の要約なし |
||
1 行
== 画像の描画 ==
たとえばブラウザ上でJavaScriptを使って長方形を描くなら、
<syntaxhighlight lang="js">
39 ⟶ 41行目:
また、数値計算をしているワケではないですが、JAvaScript ではこのように、なんらかの命令をするときに、形式的に変数が必要になる場合があります。
== 文字画像の表示 ==
単に文字を上から表示するだけなら、HTMLとして文章を記述すればいいだけです。
しかし、座標を指定して文字をその位置から表示したい場合などは、どうすればいいのでしょうか？
下記のようなコードになります。
<syntaxhighlight lang="js">
<meta charset="Shift_JIS">
<canvas id="canvasTest" width="600" height="600"></canvas>
<script type="text/javascript">
var dummy = document.getElementById("canvasTest");
var cont = dummy.getContext("2d");
var text = document.getElementById("textTest");
cont.font = "40px serif"
cont.fillText("Hello Text",30,50);
</script>
</syntaxhighlight>
<code>.fillText</code> で、座標を指定して文字出力できます。
なお、事前にfontプロパティを設定しておかないと、表示がバグり、なんか小さい文字だけしか出力されなかったりします。
| |||