HTML5 캔버스의 글꼴 색상을 설정하는 방법(코드 예)

HTML5 캔버스에서는 fillStyle 속성을 사용하여 텍스트의 글꼴 색상을 설정할 수 있습니다. #cc0000과 같은 색상 코드 값이나 빨간색과 같은 색상의 영어 단어를 사용할 수 있습니다. 모든 사람에게 도움이 되기를 바라면서 아래 내용을 살펴보겠습니다. [동영상 튜토리얼 추천: HTML 튜토리얼]

먼저 HTML 페이지의 캔버스 태그를 사용하여 캔버스를 만들고 해당 ID 값을 myCanvas로 설정해야 합니다.

<canvas id="myCanvas"></canvas>

그런 다음 JavaScript를 사용하여 캔버스에 텍스트 그래픽을 그립니다

1. 캔버스 컨트롤을 가져옵니다

var canvas = document.getElementById("myCanvas");// 查找画布元素

2. getContext() 메서드를 사용하여 그리기 환경을 구성하고 그리기 개체를 만듭니다

var ctx = canvas.getContext("2d");

3. 캔버스에 텍스트를 그리는 메소드 텍스트를 작성하며, 매개변수는 텍스트 내용과 텍스트 위치입니다.

글꼴 속성을 사용하여 텍스트의 글꼴 크기와 글꼴 유형을 설정할 수도 있습니다.

ctx .font="20px 微软雅黑";
ctx .fillText('PHP中文网',20,20,200);

Rendering:

페이지에 표시되는 텍스트가 기본 검정색 텍스트인 것을 확인할 수 있습니다.

3. 텍스트의 글꼴 색상을 설정하려면 fillStyle 속성을 사용해야 합니다. 이 속성에는 #cc0000과 같은 색상 코드 값이나 빨간색과 같은 색상의 영어 단어를 사용할 수 있습니다.

ctx .fillStyle="red";

완전한 js 코드:

<canvas id="myCanvas"></canvas>

렌더링:

위는 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 HTML5 캔버스의 글꼴 색상을 설정하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!