更新日: 2016-05-08 (日) 18:57:54 (77d)

:HTML5

HTML5 canvas上に文字(テキスト)を書く

CanvasはHTML5から新しく加わった機能で画面に描画をすることができます。
当然、文字も書けます。
次のように書いてみましょう。

下記のfillTextメソッドを利用します。

//一番目の引数が表示したい文字、2番目がX座標、3番目がY座標
context.fillText("Sample String", 10, 50);  

fontプロパティで、文字の大きさやフォントの種類が指定できます。

context.font = "20pt Arial";

注:プロパティの指定は、context.fillTextの前に書きましょう。

全部のドキュメントの例です。

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<body>
<canvas id="a_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
 var canvas = document.getElementById("a_canvas");
 var context = canvas.getContext("2d"); 

 context.font = "20pt Arial";
 context.fillText("Sample String", 10, 50);   	  	  	
</script>
</body></html>

選択肢 投票
このページの情報は役に立った 10  
このページの情報は役に立たなかった 3  
どちらでもない 2  
このページが参照された数
Total: 28064, 今日: 6, 昨日: 0

でじうぃきは神奈川県横浜市の位置情報システム・スマホアプリ開発の株式会社オンラインコンサルタントが運営しています。
投稿
トップ   このページを編集する 再編集不可にする 差分 バックアップ 添付 複製 名前変更 リロード   新しいページを作る 一覧 検索する 最新の更新   ヘルプ   最終更新のRSS
Last-modified: 2016-05-08 (日) 18:57:54 (77d)