HTML5 Canvas 텍스트 그리기

HTML5 Canvas는 HTML에서 다양한 글꼴, 크기 및 색상을 사용하여5캔버스에 텍스트를 그립니다. 텍스트의 외관은 이러한2D Context font 속성 제어, 텍스트를 그리기 위해 fillText() 또는 strokeText() 기능을 사용하십시오.

온라인 예제

HTML에서 다양한 글꼴, 크기 및 색상을 사용하여5캔버스에 텍스트를 그립니다.
텍스트의 외관은 이러한2D Context font 속성 제어. 또한, 그리려는 텍스트를 채우기 위해 fillStyle 또는 strokeStyle를 설정해야 합니다2D Context 속성.
텍스트를 그리기 위해 fillText() 또는 strokeText() 기능을 사용하십시오
이것은 간단한 코드 예제입니다:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas를 지원하지 않습니다
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d);
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas　Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML"5　Canvas　Text　50,　90);
　</script>

이는 캔버스에 그릴 때의 결과입니다:

폰트와 스타일

HTML5캔버스에 텍스트를 그릴 때, 사용할 폰트를 설정해야 합니다. 이는 다음으로 설정됩니다:2D上下문 font 속성의 값으로 완료됩니다. 이 속성은 CSS 호환 값을 가진 문자열로서, 다음과 같은 형식을 가집니다:

[font style][font weight][font size][font face]

예를 들어

context.font = "normal normal"　20px Verdana";

폰트 문자열의 각 부분에 다음 값을 설정할 수 있습니다:

모든 브라우저가 모든 값을 지원하지 않습니다. 이들을 사용하기 전에, 계획한 값을 테스트해야 합니다.
이는 또 다른 예제입니다:

"italic bold"　36px Arial"

그리는 글자

이전에 설명한 것처럼, HTML5캔버스에 텍스트를 그릴 때, 채우기 텍스트나 경계선 텍스트를 그릴 수 있습니다. 다음을 사용하여:2D上下문 fillText()와 strokeText() 함수를 사용합니다. 이 함수들은 다음과 같이 정의됩니다:

fillText　　　(textString,　x,　y　[,maxWidth]);
strokeText　(textString,　x,　y　[,maxWidth]);

textString 매개변수는 그리는 텍스트입니다.
x와 y는 텍스트에서 얻은 위치를 나타냅니다. x 매개변수는 텍스트 시작 위치입니다. y 매개변수는 텍스트가 수직으로 배치되는 위치입니다. 그러나 정확한 표현 방식은 텍스트 베이스라인에 따라 다릅니다. 텍스트 베이스라인은 나중에 설명할 것입니다.
maxWidth 텍스트는 아래의 부분에 덮여 있습니다.
이는 코드 예제입니다:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas　Text　50,　50);

텍스트 최대 너비

선택 가능한 maxWidth 매개변수는 캔버스에 텍스트가 주어진 매개변수 값보다 더 많은 공간을 차지하지 않도록 알립니다. maxWidth를 초과하는 텍스트가 들어갈 수 없으면 텍스트의 너비는 압축됩니다. 텍스트는切断되지 않습니다. 이는 maxWidth를 사용하고 사용하지 않은 동일한 텍스트를 그리는 코드 예제입니다 maxWidth:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas　Text　50,　50);
context.fillText("HTML",5　Canvas　Text　50,　100,　200);

这是在HTML5画布上绘制时这两个文本的外观:

如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素.

文字颜色

像其他任何形状一样，使用2D上下文的fillStyle和 strokeStyle属性设置填充或描边文本的颜色。在这里，我不会更详细地介绍这些属性。有关 更多详细信息，请参见描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例:

var　textMetrics　=　context.measureText("measure　this");
var　width　=　textMetrics.width;

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。 fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义:

这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。将画一条线y=75，向您展示如何围绕该y值设置文本基线。

以下是生成上述图形的代码:

context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　　0,　75);
context.lineTo(500,　75);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top",　0,　75);
context.textBaseline = "hanging";
context.fillText("hanging",　40,　75);
context.textBaseline = "middle";
context.fillText("middle"　120,　75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic",　200,　75);
context.textBaseline = "ideographic";
context.fillText("ideographic",　300,　75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph",　400,　75);

글자 정렬

2D 컨텍스트 textAlign 속성은 텍스트를 그릴 때 어떻게 수평 정렬되는지 정의합니다. 다시 말해, textAlign 속성은 x 위치에 텍스트를 그릴 때의 좌표를 정의합니다.

아래는 textAlign 속성이 어떻게 작동하는지 보여주는 몇 가지 예제입니다. 가로선은 x = 250. 모든 텍스트도 x = 250, 하지만 textAlign 속성의 값이 다릅니다.

이는 그래픽 코드 예제입니다：

<canvas id="ex4" width="500" height="120" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas를 지원하지 않습니다
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d);
context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　250, 0);
context.lineTo(　250,　250);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center",　250,　20);
context.textAlign = "start";
context.fillText("start",　250,　40);
context.textAlign = "end";
context.fillText("end",　250,　60);
context.textAlign = "left";
context.fillText("left",　250,　80);
context.textAlign = "right";
context.fillText("right",　250,　100);
</script>

코드 실행 결과는 다음과 같습니다: