HTML5 캔버스 텍스트의 스타일을 굵게 및 / 또는 기울임 꼴로 어떻게 지정합니까?

캔버스에 텍스트를 매우 간단하게 인쇄하고 있습니다.

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

하지만 텍스트를 굵게, 기울임 꼴 또는 둘 다로 변경하려면 어떻게해야합니까? 이 간단한 예를 수정하기위한 제안이 있습니까?

다음 중 하나를 사용할 수 있습니다.

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

자세한 내용은 다음 두 가지 리소스를 참조하십시오.

• HTML5 살펴보기
• 캔버스에 텍스트를 표시하는 방법
• HTML5 Canvas-기본 사항

이 문제를 우연히 발견 한 사람에게는 추가로 알려드립니다. 수락 된 답변에 표시된 순서를 따르십시오.

주문이 잘못되었을 때 브라우저 간 문제가 발생했습니다. "10px Verdana bold"는 Chrome에서 작동하지만 IE 나 Firefox에서는 작동하지 않습니다. 표시된대로 "bold 10px Verdana"로 전환하면 이러한 문제가 해결되었습니다. 비슷한 문제가 발생하면 주문을 다시 확인하십시오.

따라서 하나의 JS 명령에 설정 font-weight( font-size또는 font-family...) 할 방법이 없습니까? 모두 하나의 완전한 글꼴 문자열에 있어야합니까?

캔버스 메서드 또는 속성을 통해 밑줄을 칠 수 없습니다. 그러나 나는 그것을 끝내기 위해 몇 가지 작업을 수행했습니다. http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround에서 확인할 수 있습니다 .

http://jsfiddle.net/durgesh0000/KabZG/ 에서 구현을 찾을 수 있습니다.

서식 변경을 허용해야하는 경우 글꼴 스타일을 설정하고 텍스트를 measureText그리고를 사용하여 측정 하고 새 스타일을 설정 한 다음 다음과 같이 다음 블록을 그릴 수 있습니다.

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);

<canvas id="my-canvas" width="250" height="150"></canvas>

추가 읽기

• MDN> 캔버스> 텍스트 그리기
• 기울임 꼴로 개별 단어 서식 지정