FC2ブログ

canvasへの文字の描画

文字の描画

文字の描画はマウスボタンがクリックされたときの
イベントを捕捉してから行う

あと、文字を描画するときには
一旦canvas全体を黒く塗りつぶしてから
行う
これは
すでにある文字の上に重なって表示されると
わかりにくいから

この処理のソースは
context.fillStyle="black";
context.fillRect(canvasObj.width,canvasObj.height);
となる

表示する文字は
テキストフィールドへ入力した文字なので
読み出して変数へ格納

ソースにすると
var text = document.getElementById("char").value;

あとは、fillText()で読み出した文字を描く
fillText()のパラメータは
書きたい文字
横幅
縦幅

これが
textに格納している文字
canvasObj.width /2
320

となる

canvasObj.width/2は
画面の大きさの半分
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック