HTML5 캔버스에서 텍스처 필 및 스트로크를 구현하는 방법 (충전 및 스트로크)

저자：Eve Cole 업데이트 시간：2025-04-23 01:00:03

댓글 :이 기사는 HTML5 캔버스 필 및 스트로크 텍스트 효과를 자세히 소개합니다. 캔버스를 기반으로 텍스처 충전 및 스트로크, 색상 충전 및 스트로크를 달성하는 방법에 따라 특정 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.

캔버스가 텍스처 충전 및 스트로크를 구현하는 방법에 따라 HTML5 캔버스 필 및 스트로크 텍스트 효과를 보여줍니다.

1 : 색상 채우기와 스트로크

색상 충전물은 FillStyle을 통해 달성 될 수 있으며 스트로크 색상을 통해 뇌졸중 색상을 달성 할 수 있습니다. 간단한 예

다음과 같이 :

// 텍스트를 채우고 스트로크합니다

ctx.font = '60pt calibri';

ctx.linewidth = 3;

ctx.strokestyle = 'Green';

ctx.stroketext ( 'Hello World!', 20, 100);

ctx.fillstyle = '빨간색';

ctx.filltext ( 'Hello World!', 20, 100);

둘 : 질감 충전 및 스트로크

HTML5 캔버스는 또한 텍스처 충전을 지원합니다. 텍스처 이미지를로드 한 다음 브러시 패턴을 생성함으로써 텍스처 패턴을 만드는 API는 CTX.CreatePattern (imageTexture, Reture)입니다. 두 번째 매개 변수는 4 가지 값, 즉 Return-X, Reture-Y, Reture, No-Repeat를 지원합니다. 즉, X 축, Y 축 및 XY 방향을 따라 텍스처가 각각 반복되거나 반복되지 않음을 의미합니다. 텍스처 스트로크 및 충전에 대한 코드는 다음과 같습니다.

var woodfill = ctx.createpattern (imageetexture, "반복");

ctx.strokestyle = Woodfill;

ctx.stroketext ( 'Hello World!', 20, 200);

// 사각형을 채우십시오

ctx.fillstyle = Woodfill;

ctx.fillRect (60, 240, 260, 440);

텍스처 사진 :

3 : 작동 효과

암호:

<! doctype html>

<html>

<헤드>

<cript>

var ctx = null; // 글로벌 변수 2D 컨텍스트

var imagetexture = null;

Window.onload = function () {

var canvas = document.getElementById ( "text_canvas");

console.log (canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentnode.clientHeight;

if (! canvas.getContext) {

Console.log ( "캔버스가 지원되지 않습니다. HTML5 호환 브라우저를 설치하십시오.");

반품;

}

// 캔버스의 2D 컨텍스트를 얻고 사각형을 그립니다

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

ctx.fillstyle = "black";

ctx.fillRect (0, 0, canvas.width, canvas.height);

// 텍스트를 채우고 스트로크합니다

ctx.font = '60pt calibri';

ctx.linewidth = 3;

ctx.strokestyle = 'Green';

ctx.stroketext ( 'Hello World!', 20, 100);

ctx.fillstyle = '빨간색';

ctx.filltext ( 'Hello World!', 20, 100);

// 패턴으로 채우고 뇌졸중

imageTexture = document.createElement ( 'IMG');

imageTexture.src = "../pattern.png";

imageTexture.onload = loaded ();

}

함수로드 () {

// 이미지로드 지연

settimeout (TextureFill, 1000/30);

}

함수 texturefill () {

// var woodfill = ctx.createPattern (imageetexture, "repeat-x");

// var woodfill = ctx.createPattern (imageetexture, "repeat-y");

// var woodfill = ctx.createPattern (imageetexture, "no-Repeat");

var woodfill = ctx.createpattern (imageetexture, "반복");

ctx.strokestyle = Woodfill;

ctx.stroketext ( 'Hello World!', 20, 200);

// 사각형을 채우십시오

ctx.fillstyle = Woodfill;

ctx.fillRect (60, 240, 260, 440);

}

</스크립트>

</head>

<body>

<H1> HTML5 캔버스 텍스트 데모 -Gloomy Fish </h1>

<div>

</div>

</body>

</html>