집 > 기사 > 웹 프론트엔드 > HTML5 Canvas의 텍스트 정렬에 대한 코드 요약

HTML5 Canvas의 텍스트 정렬에 대한 코드 요약

黄舟원래의: 2017-03-14 16:00:242289검색

이 글에서는 가로로 정렬된 context.textAlign과 세로로 정렬된 context.textBaseline 및 각각의 사용을 포함하여 텍스트 정렬을 달성하기 위한 HTML5 캔버스의 방법에 대한 요약을 주로 소개합니다. 필요하신 친구들은

가로정렬 textAlign

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

를 참고하시면 됩니다. 값과 의미는 다음과 같습니다.

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

예문을 통해 직관적으로 느껴보자.

아아아앙

실행 결과:
HTML5 Canvas의 텍스트 정렬에 대한 코드 요약

텍스트 수직 정렬Baseline

<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>textAlign</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        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="blue";   
        context.moveTo(400,100);   
        context.lineTo(400,500);   
        context.stroke();   
  
  
        context.fillStyle = "#000";   
        context.font="50px Arial";   
  
        // 显示不同的 textAlign 值   
        context.textAlign="start";   
        context.fillText("textAlign=start", 400, 120);   
        context.textAlign="end";   
        context.fillText("textAlign=end", 400, 200);   
        context.textAlign="left";   
        context.fillText("textAlign=left", 400, 280);   
        context.textAlign="center";   
        context.fillText("textAlign=center", 400, 360);   
        context.textAlign="right";   
        context.fillText("textAlign=right", 400, 480);   
    };   
</script>   
</body>   
</html>

값과 의미는 다음과 같습니다.

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

먼저, 각 기준선이 나타내는 위치를 사진을 통해 살펴보겠습니다.
HTML5 Canvas의 텍스트 정렬에 대한 코드 요약

예를 들어 직관적으로 느껴보자.

아아아앙

실행 결과:

위 내용은 HTML5 Canvas의 텍스트 정렬에 대한 코드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 모방 휴대폰 WeChat 채팅 인터페이스의 상세 분석다음 기사：HTML5 모방 휴대폰 WeChat 채팅 인터페이스의 상세 분석