HTML5 Canvas_html5 튜토리얼 기술에서 텍스처 채우기 및 획(채우기 및 획)을 구현하는 방법

HTML5 캔버스 채우기 및 획 텍스트 효과와 캔버스를 기반으로 텍스처 채우기 및 획을 구현하는 방법을 보여줍니다.

1: 색 채우기와 획
색 채우기는 fillStyle을 통해, 획 색상은 획 스타일을 통해 구현할 수 있습니다. 간단한 예시
는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

// 텍스트 채우기 및 획
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
ctx.StrokeStyle = 'green'
ctx.strokText(' Hello World!', 20 , 100)
ctx.fillStyle = 'red';
ctx.fillText('Hello World!', 20, 100)

2: 텍스처 채우기 및 스트로크
HTML5 Canvas는 텍스처 이미지를 로드한 다음 브러시 패턴을 생성함으로써 텍스처 패턴을 생성하는 API는 ctx.createPattern(imageTexture, "repeat")입니다. ; 두 번째 매개변수는 4개를 지원합니다. 값은 "repeat-x", "repeat-y", "repeat", "no-repeat"로, 텍스처가 X축을 따라 반복되거나 반복되지 않음을 의미하며, 각각 Y축 및 XY 방향입니다. 텍스처 획 및 채우기 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

var woodfill = ctx.createPattern(imageTexture,"repeat");
ctx.StrokeStyle = woodfill
ctx.strokText('Hello World!', 20, 200); // 직사각형 채우기
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440)

텍스처 이미지:


3: 실행 효과
코드:

코드 복사 코드는 다음과 같습니다:

Compatible" content="chrome=IE8" >



<script> var ctx = null; <br />var imageTexture = null; <br />window.onload = function() { <br />var canvas = document.getElementById("text_canvas") <br />console.log(canvas.parentNode.clientWidth); >canvas.width = canvas.parentNode.clientWidth; <br />canvas.height = canvas.parentNode.clientHeight; <br />if (!canvas.getContext) { <br />console.log("캔버스는 지원되지 않습니다. HTML5 호환 브라우저."); <br />return; <br />} <br />// 캔버스의 2D 컨텍스트를 가져오고 직사각형을 그립니다. <br />ctx = canvas.getContext("2d"); <br />ctx.fillStyle= "black"; <br />ctx.fillRect(0, 0, canvas.width, canvas.height); <br />// 텍스트 채우기 및 획 <br />ctx.font = '60pt Calibri'; lineWidth = 3; <br />ctx.StrokeStyle = 'green'; <br />ctx.strokText('Hello World!', 20, 100) <br />ctx.fillStyle = 'red'; ('Hello World!', 20, 100); <br />// 패턴으로 채우기 및 획 <br />imageTexture = document.createElement('img') <br />imageTexture.src = "../pattern.png "; <br />imageTexture.onload = 로드됨(); <br />} <br />functionload() { <br />// 이미지 로드 지연 <br />setTimeout(textureFill, 1000/30); <br />} <br />function TextureFill() { <br />// var woodfill = ctx.createPattern(imageTexture, "repeat-x"); <br />// var woodfill = ctx.createPattern(imageTexture, "repeat-y"); <br />// var woodfill = ctx .createPattern(imageTexture, "no-repeat"); <br />var woodfill = ctx.createPattern(imageTexture, "repeat") <br />ctx.StrokeStyle = woodfill; ctx.StrokeText('Hello World!' , 20, 200); <br />// 직사각형 채우기 <br />ctx.fillStyle = woodfill <br />ctx.fillRect(60, 240, 260, 440); } <br /></script>

HTML5 캔버스 텍스트 데모 - 작성자: Gloomy Fish

 채우기 및 획

;/본문>