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

    };