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

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

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

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

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

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

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

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

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

};