HTML5 캔버스에 텍스트 그래픽을 그리는 방법
- 青灯夜游원래의
- 2018-12-21 11:46:204127검색
HTML5에서는 먼저
HTML5의
캔버스를 만들려면
HTML 페이지에서 캔버스는 직사각형 영역입니다. 캔버스 태그 요소를 사용하여 지정됩니다. 기본적으로 캔버스에는 테두리와 내용이 없으며 컨테이너와 같습니다. 하지만 내장 속성이나 CSS를 사용하여 일부 스타일을 추가할 수 있습니다.
예: 너비 속성과 높이 속성을 사용하여 너비와 높이를 설정합니다.
<canvas id = "mycanvas" width ="400" height ="250"> </canvas>
CSS를 사용하여 캔버스에 테두리와 배경색을 추가할 수도 있습니다. 예:
<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>
캔버스를 만들 수 없으면
렌더링:
JavaScript를 사용하여 캔버스에 텍스트 그래픽 그리기
먼저 캔버스에 텍스트 그래픽을 그리는 데 사용해야 하는 가장 중요한 속성 및 메서드를 살펴보겠습니다. 캔버스:
1. 글꼴 속성: 텍스트의 글꼴 속성을 정의합니다. 글꼴 속성은 캔버스에 있는 텍스트 콘텐츠의 현재 글꼴 속성을 설정하거나 반환할 수 있습니다. 사용법은 CSS 글꼴 속성과 유사합니다.
2. fillText() 메소드: 캔버스에 "채우기" 텍스트를 그립니다. 텍스트의 기본 색상은 검정색입니다. 기본 구문은 다음과 같습니다.
fillText(text, x, y, [maxWidth])
3, 스트로크텍스트() 메서드: 캔버스에 텍스트를 그립니다(채우지 않고). 즉, 마찬가지로 텍스트 윤곽선 그래픽을 그립니다. 텍스트 색상의 기본값은 검정색입니다. 기본 구문은 다음과 같습니다.
strokeText(text, x, y, [maxWidth])
매개변수 설명:
text: 캔버스에 출력해야 하는 텍스트 그래픽을 나타냅니다.
x, y: 캔버스를 기준으로 텍스트 그리기 시작의 x 좌표 및 y 좌표 위치
maxWidth: 허용되는 최대 텍스트 너비를 픽셀 단위로 나타내는 선택적 매개변수입니다.
다른 가능한 텍스트 스타일 속성을 살펴보겠습니다.
1. textAlign 스타일 속성: X축 좌표를 기준으로 텍스트 콘텐츠의 현재 정렬을 설정하거나 반환합니다.
값은 다음과 같습니다: start(기본값, 텍스트의 시작 위치 지정), end(텍스트의 끝 위치 지정), center(텍스트 중앙의 배치 위치 지정), left(왼쪽) 정렬), 오른쪽(오른쪽 정렬).
2. fillStyle 속성: 그림을 채우는 데 사용되는 색상, 그라데이션 또는 모드를 설정하거나 반환합니다.
텍스트 그래픽을 그리고 예제를 통해 그리는 방법을 살펴보겠습니다.
예제 1: fillText() 사용
<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("PHP中文网！",10,50);
</script>렌더링:
예 2: 스트로크텍스트() 사용
으으으으렌더링:
예 3: 색상 및 가운데 텍스트 추가
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.strokeText("PHP中文网！",10,50);
</script>렌더링:
요약: 위 내용은 이 기사의 전체 내용입니다. 모든 사람이 도움말을 배우는 데 도움이 되기를 바랍니다.
위 내용은 HTML5 캔버스에 텍스트 그래픽을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!