집 > 기사 > 웹 프론트엔드 > HTML5 Canvas에서 텍스트 정렬을 달성하는 방법 요약

HTML5 Canvas에서 텍스트 정렬을 달성하는 방법 요약

不言원래의: 2018-06-05 15:58:382862검색

이 글에서는 수평 정렬 context.textAlign 및 수직 정렬 context.textBaseline 및 다양한 매개변수 사용을 포함하여 HTML5 Canvas에서 텍스트 정렬을 달성하는 방법에 대한 요약을 주로 소개합니다.

JavaScript 코드

클립보드에 내용을 복사하세요

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

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

<!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>

valuedescriptiondefault. 텍스트는 지정된 위치에서 시작됩니다. 텍스트는 지정된 위치에서 끝납니다. 텍스트의 중앙이 지정된 위치에 배치됩니다. 텍스트는 왼쪽으로 정렬되고, 텍스트는 오른쪽으로 정렬됩니다. 예문을 통해 직관적으로 느껴보자.

	start
	end
	center
	left
	right

JavaScript 코드

클립보드에 콘텐츠 복사

<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>textBaseline</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; }  
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<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);   
  
        //在位置 y=300 绘制蓝色线条   
        context.strokeStyle="blue";   
        context.moveTo(0,300);   
        context.lineTo(800,300);   
        context.stroke();   
  
        context.fillStyle = "#00AAAA";   
        context.font="20px Arial";   
  
        //在 y=300 以不同的 textBaseline 值放置每个单词   
        context.textBaseline="top";   
        context.fillText("Top",150,300);   
        context.textBaseline="bottom";   
        context.fillText("Bottom",250,300);   
        context.textBaseline="middle";   
        context.fillText("Middle",350,300);   
        context.textBaseline="alphabetic";   
        context.fillText("Alphabetic",450,300);   
        context.textBaseline="hanging";   
        context.fillText("Hanging",550,300);   
    };   
</script>   
</body>   
</html>

실행 결과:

텍스트 기준선을 수직으로 정렬 2016324114332033.jpg (850×500)

JavaScript 코드

콘텐츠를 클립보드에 복사

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

각각의 값과 의미는 아래 표와 같습니다.

값 설명 기본값입니다. 텍스트 기준선은 일반 문자 기준선입니다. 텍스트 기준선은 전자 메일 상자의 상단입니다. 텍스트 기준선은 매달린 기준선입니다. 텍스트 기준선은 전각 상자의 중앙입니다. 텍스트 기준선은 표의 문자 기준선입니다. 텍스트 기준선은 전각 상자의 하단입니다. 먼저, 각 기준선이 나타내는 위치를 사진을 통해 살펴보겠습니다.

	알파벳
	top
	hanging
	middle
	ideographic
	bottom

예를 들어 직관적으로 느껴보겠습니다. ㅋㅋㅋ togram ( 바 그림 ) 예 효과 코드
2016324114358024.gif (600×268)

위 내용은 HTML5 Canvas에서 텍스트 정렬을 달성하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 태그 컬렉션다음 기사：HTML5 태그 컬렉션