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);   

};