HTML5 Canvas의 텍스트 정렬에 대한 코드 요약-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Mar 14, 2017 pm 04:00 PM

canvas html5 텍스트 정렬

이 글에서는 가로로 정렬된 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方框的底端。