「JavaScript/Canvas」の版間の差分

削除された内容 追加された内容
編集の要約なし
コード修正
57 行
var cont = dummy.getContext("2d");
 
var text1 = "Hello Text";
var text = document.getElementById("textTest");
 
cont.font = "40px serif"
cont.fillText("Hello Text"text1,30,50);
</script>
</syntaxhighlight>
 
または
 
<syntaxhighlight lang="js">
<meta charset="Shift_JIS">
<canvas id="canvasTest" width="600" height="600"></canvas>
<script type="text/javascript">
var textdummy = document.getElementById("textTestcanvasTest");
var cont = dummy.getContext("2d");
 
cont.font = "40px serif"
cont.fillText("Hello Text,30,50);
</syntaxhighlight>
 
です。(※ 動作確認は2020年代のFirefox 75.0 とGoogle Chrome 84 で動作確認)
 
 
;解説
<code>.fillText</code> で、座標を指定して文字出力できます。
 
なお、事前にfontプロパティを設定しておかないと、表示がバグり、なんか小さい文字だけしか出力されなかったりします。
 
 
※ 市販の書籍には、どういうワケか filltext などが書いてないですが、しかし2020年代の Firefox とGoogle Chrome で上記コードは動き、正常に文字表示できます。