HTML5 でテキストの配置を実現する方法のまとめ Canvas_html5 チュートリアル スキル

テキストを配置水平方向に配置

JavaScript コードコンテンツをクリップボードにコピーします

1. context.textAlign="center|end|left|right|start";

それぞれの値と意味は以下のとおりです。

直感的に感じられるように例を挙げてみましょう。

JavaScript コードコンテンツをクリップボードにコピーします

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

<スクリプト>   

window.onload = 関数(){

var canvas = document.getElementById("canvas");   

canvas.width = 800;   

canvas.height = 600;   

var context = canvas.getContext("2d");   

context.fillStyle = "#FFF";   

context.fillRect(0,0,800,600);   

// 在位置 400 创建蓝線

context.ストロークスタイル="青";   

context.moveTo(400,100);   

context.lineTo(400,500);   

context.ストローク();   

context.fillStyle = "#000";   

context.font="50px Arial";   

// 表示異なる textAlign 值

context.textAlign="開始";   

context.fillText("textAlign=start", 400, 120);   

context.textAlign="終了";   

context.fillText("textAlign=end", 400, 200);   

context.textAlign="左";   

context.fillText("textAlign=left", 400, 280);   

context.textAlign="センター";   

context.fillText("textAlign=center", 400, 360);   

context.textAlign="右";   

context.fillText("textAlign=right", 400, 480);   

};   

  

  

  

実行結果:

textBaseline を垂直に揃えます

JavaScript コードコンテンツをクリップボードにコピーします

1. context.textBaseline="アルファベット|上|吊り下げ|中|表意文字|下"
;

それぞれの値と意味は以下のとおりです。

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

まず、各ベースラインが表す位置を写真で見てみましょう。

直感的に感じられるように例を挙げてみましょう。

JavaScript コードコンテンツをクリップボードにコピーします

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<スクリプト>

window.onload = function(){

var Canvas = document.getElementById("canvas");

Canvas.width = 800;

Canvas.height = 600;

var context = Canvas.getContext("2d"); context.fillStyle =

"#FFF"

; context.fillRect(0,0,800,600);

//位置 y=300 に青い線を描画

context.ストロークスタイル="青"

;

context.moveTo(0,300); context.lineTo(800,300);

context.ストローク();

context.fillStyle =

"#00AAAA"

;

context.font=

"20px Arial";

//異なる textBaseline 値を使用して各単語を y=300 に配置します

context.textBaseline=

"トップ"

; context.fillText("トップ"

,150,300);

context.textBaseline="下";

context.fillText(

"下",250,300); context.textBaseline=

"中"

; context.fillText("中"

,350,300);

context.textBaseline="アルファベット";

context.fillText(

"アルファベット",450,300); context.textBaseline=

"ハング"

; context.fillText("ハンギング"

,550,300);

};

実行結果: