Drawing text using a canvas

<canvas> 요소는 실험적인 Mozilla-specific API를 통해 텍스트 그리기를 지원합니다.

API

attribute DOMString mozTextStyle; 
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);

참고

• 기본 폰트는 12pt 고딕(sans-serif) 입니다.
• 본 폰트 확장은 WHATWG에 의해 표준화되지 않았습니다.
• API를 사용하기 위해 특별한 컨텍스트(context)가 필요한 것은 아니며, 2D 컨텐스트에서도 잘 동작합니다.
• 모든 그리기는 현재 변환(transform)을 통해 수행됩니다.
• 구현과 관련된 세부 사항은 bug 339553를 참조하세요.

예제

여기, 여기, 그리고 여기에 몇 가지 예제가 있습니다.

폰트 변경하기

현재 텍스트 스타일은 mozTextStyle 속성으로 지정할 수 있습니다. 이 속성은 CSS font 지정자와 동일한 구문입니다.

예:

ctx.mozTextStyle = "20pt Arial"

텍스트 그리기

그리기는 아주 간단합니다. 현재 텍스트 스타일에 상관없이 mozDrawText를 사용하면 됩니다. 컨텍스트의 채우기 색이 텍스트 색으로 사용됩니다.

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

텍스트 측정하기

Sometimes it is useful to know how wide a particular bit of text is (say for centering it in a window).

var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);

Text/path interaction

mozDrawText로는 텍스트의 테두리를 그릴 수 없습니다. 그러나, mozPathText 메소드를 사용하면 텍스트의 외곽선을 현재의 경로에 추가할 수 있습니다.

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

텍스트가 그려질 경로(곡선이거나 또 다른 것)가 있을 경우에는 mozTextAlongPath를 사용할 수 있습니다. 다른 텍스트 함수와 달리 mozTextAlongPath는 텍스트와 무엇을 할지를 나타내는 2개의 인자를 받습니다. mozTextAlongPath approximates the current path as a series of line segments and places each glyph along that flattened path. The glyphs are not scaled or transformed according to the curvature of their baseline; they take on the orientation of the flattened path at the midpoint of the glyph.

Once mozTextAlongPath knows where the glyphs are, it looks at the second parameter to decide what to do with them. If the second parameter is false, then it will draw the glyphs just like mozDrawText does. If it is true, then it will add the glyphs to the current path, just like mozPathText does. This can be used to create some unique effects.