HTML5 Canvas_html5 튜토리얼 기술에서 텍스트 정렬을 달성하는 방법 요약

텍스트 정렬가로 정렬

JavaScript 코드클립보드에 콘텐츠 복사

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

각각의 가치와 의미는 다음과 같습니다.

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

직관적으로 느껴보실 수 있도록 예를 들어보겠습니다.

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.StrokeStyle="파란색";   

        context.moveTo(400,100);   

        context.lineTo(400,500);   

        context.Stroke();   

  

  

        context.fillStyle = "#000";   

        context.font="50px Arial";   

  

        // 显示不同的 textAlign 值   

        context.textAlign="시작";   

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

        context.textAlign="end";   

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

        context.textAlign="왼쪽";   

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

        context.textAlign="center";   

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

        context.textAlign="오른쪽";   

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

    };   

  

  

  

실행 결과:

텍스트 수직 정렬

JavaScript 코드클립보드에 콘텐츠 복사

1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"

각각의 가치와 의미는 다음과 같습니다.

值	描述
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 = 함수(){

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

canvas.width = 800

캔버스.높이 = 600

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

"#FFF"

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

//y=300 위치에 파란색 선을 그립니다.

context.StrokeStyle=

"파란색"

context.moveTo(0,300)

context.lineTo(800,300)

context.Stroke()

context.fillStyle =

"#00AAAA"

context.font=

"20px Arial"

//각 단어를 y=300에 다른 textBaseline 값으로 배치

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

실행 결과: