HTML5 캔버스 텍스트 채우기, 선분 속성, 자르기, 투명도 및 픽셀 병합 방법

CSS3의 많은 속성을 캔버스의 일부 속성과 비교할 수 있습니다.
캔버스의 "브러시" 환경 개체의 많은 속성을 CSS3의 속성과 비교할 수 있습니다.
우리는 뿐만 아니라 그래픽을 그릴 수 있을 뿐만 아니라 캔버스에 텍스트를 추가할 수도 있습니다

텍스트 채우기

또한 요소 개체와 환경 개체를 먼저 가져옵니다

<canvas id="myCanvas" width=500 height=500></canvas>

rrree

글꼴이 사용됩니다. 글꼴 속성을 설정하려면
fillText는 단색 텍스트와 위치를 설정합니다
스트로크텍스트는 속이 빈 텍스트와 위치를 설정합니다

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

font는 CSS의 글꼴 속성을 참조할 수 있습니다
기본값 '10px sans- serif'

---

텍스트 너비를 측정하는 방법도 있습니다. 알아두세요
measureText()

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

선분 속성

Line Segment Coverage

lineCap( )은 세 개의 값, butt/square/round

console.log(ctx.measureText('hello world!').width);

를 갖는 Line Segment Coverage 속성

을 설정하는 데 사용됩니다. 세 가지 중요한 차이점을 볼 수 있도록 제가
그림을 추가했습니다.

선분 결합

lineJoin()은 선분의 동작을 정의합니다. 결합
세 가지 값도 있습니다. 마이터/라운드/베벨

ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

기본 마이터를 사용할 때
두 개일 때 선분의 각도가 매우 작을 때
"샤프"가 점점 커집니다

어느 정도 "sharp"에 도달하면 기본값은 bever가 됩니다.

이 제한을 깨도록 설정할 수 있으므로 miterLimit
을 사용하세요. 기본값의 길이를 변경하면 제한*lineWidth/2로 설정합니다
그냥 이해하세요

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

자르기

클립 속성은 현재 경로 외부 영역이 더 이상 그려지지 않음을 의미합니다
캔버스에서 현재 영역을 자르는 것과 같습니다

ctx.miterLimit = 30;

여기서 캔버스를 원으로 자릅니다
. 직사각형을 채우면 이 "원형 캔버스"에만 채워질 수 있습니다

투명도

globalAlpha를 사용하여 전역 투명도를 설정할 수 있습니다
이것은 매우 간단하며 저는 자세히 설명하지 않겠습니다

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

픽셀 병합

globalCompositeOperation은
새 그래픽 픽셀과 이전 그래픽 픽셀의 병합 방법 11개의 값이 있습니다 ​​
공통적인 값은 3가지가 있는데 source-over(기본값)/destination-over/copy
souce-over는 먼저 그려진 그래픽을 먼저 그린 그래픽에 덮어쓰는 것입니다. 상단
destination-over는 그래픽을 먼저 그린 다음 그래픽의 상단을 그리는 것입니다.
copy는 그래픽만 표시한 다음 그래픽을 그리는 것입니다(먼저 그려진 그래픽은 사라집니다)
다른 값은 이론적으로 이렇습니다. (다른 브라우저 구현 수준 또는 다른 방식)

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

아래에는 내가 테스트한 11개의 값이 있습니다. 참고용 최신 버전의 Chrome

소스 오버:

대상 오버:

복사:

가벼운:

xor:

source-atop:

대상 꼭대기:

출처:

목적지:

source-out:

destination-out:

위는 HTML5 Canvas입니다. 텍스트 채우기, 선분 속성, 자르기, 투명도 및 픽셀 병합 방법에 대해서는 PHP 중국어 웹사이트(www.php.cn)를 참고하여 더 많은 관련 내용을 확인하세요!