Résumé des méthodes pour réaliser l'alignement du texte dans HTML5 Compétences du didacticiel Canvas_html5

Aligner le texteAligner horizontalement

Code JavaScriptCopier le contenu dans le presse-papiers

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

Les valeurs et significations de chacun sont les suivantes.

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐，
right	文本右对齐。

Utilisons un exemple pour le ressentir intuitivement.

Code JavaScriptCopier le contenu dans le presse-papiers

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

  

  

<script>   </span> </li> <li class="alt"> <span>    window.onload = </span><span class="keyword">fonction</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"> <span>        canvas.width = 800 ;   </span> </li> <li> <span>        canvas.height = 600 ;   </span> </li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillRect(0,0,800,600);   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>        </span><span class="comment">// 在位置 400 创建蓝线 </span><span>  </span> </li> <li> <span>        context.StrokeStyle=</span><span class="string">"bleu"</span><span>;   </span> </li> <li class="alt"> <span>        context.moveTo(400,100);   </span> </li> <li> <span>        context.lineTo(400 500);   </span> </li> <li class="alt"> <span>        context.Stroke();   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>  </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#000"</span><span>;   </span> </li> <li class="alt"> <span>        context.font=</span><span class="string">"50px Arial"</span><span>;   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>        </span><span class="comment">// 显示不同的 textAlign 值 </span><span>  </span> </li> <li> <span>        context.textAlign=</span><span class="string">"start"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillText(</span><span class="string">"textAlign=start"</span><span>, 400, 120);   </span> </li> <li> <span>        context.textAlign=</span><span class="string">"fin"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillText(</span><span class="string">"textAlign=end"</span><span>, 400, 200);   </span> </li> <li> <span>        context.textAlign=</span><span class="string">"gauche"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillText(</span><span class="string">"textAlign=left"</span><span>, 400, 280);   </span> </li> <li> <span>        context.textAlign=</span><span class="string">"center"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillText(</span><span class="string">"textAlign=center"</span><span>, 400, 360);   </span> </li> <li> <span>        context.textAlign=</span><span class="string">"droite"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillText(</span><span class="string">"textAlign=right"</span><span>, 400, 480);   </span> </li> <li> <span>    } ;   </span> </li> <li class="alt"> <span></script>   

  

  

Résultat de l'exécution :

Aligner verticalement textBaseline

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.textBaseline="alphabétique|haut|suspendu|milieu|idéographique|bas"

Les valeurs et significations de chacun sont les suivantes.

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

Tout d’abord, jetons un coup d’œil aux positions représentées par chaque ligne de base à travers une image.

Utilisons un exemple pour le ressentir intuitivement.

Code JavaScriptCopier le contenu dans le presse-papiers

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

<script> </span> </li> <li class="alt"> <span> window.onload = </span><span class="keyword">fonction</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span> </span> </li>); <li class="alt"> <span> toile.width = 800 </span> </li> <li> <span> toile.hauteur = 600 </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span> </span> </li>); <li> <span> context.fillStyle = </span><span class="string">"#FFF"</span><span> </span> </li> <li class="alt"> <span> context.fillRect(0,0,800,600); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="comment">//Trace une ligne bleue à la position y=300 </span><span> </span> </li> <li> <span> context.StrokeStyle=</span><span class="string">"bleu"</span><span> </span> </li> <li class="alt"> <span> contexte.moveTo(0,300); </span> </li> <li> <span> context.lineTo(800,300); </span> </li> <li class="alt"> <span> contexte.AVC(); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> context.fillStyle = </span><span class="string">"#00AAAA"</span><span> </span> </li> <li> <span> context.font=</span><span class="string">"20px Arial"</span><span> </span> </li> <li class="alt"> <span> </span> </li> <li> <span> </span><span class="comment">//Placez chaque mot à y=300 avec une valeur textBaseline différente </span><span> </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"top"</span><span> </span> </li>; <li> <span> context.fillText(</span><span class="string">"Haut"</span><span>,150,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"bas"</span><span> </span> </li> <li> <span> context.fillText(</span><span class="string">"Bas"</span><span>,250 300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"milieu"</span><span> </span> </li> <li> <span> context.fillText(</span><span class="string">"Moyen"</span><span>,350,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"alphabétique"</span><span> </span> </li> <li> <span> context.fillText(</span><span class="string">"Alphabétique"</span><span>,450,300); </span> </li> context.textBaseline=<li class="alt"> <span>"suspendu"</span><span class="string"> </span> <span> </span> </li> context.fillText(<li> <span>"Suspendu"</span><span class="string">,550,300); </span> <span> </span> </li>}; <li class="alt"> <span> </span> </li></script>

Résultat de l'exécution :