예를 들어 context.fillText("foobar",30,0);전체 텍스트 "foobar"를 30 픽셀 아래로 렌더링하지만 렌더링에서 임의의 숫자를 버리기 위해 맨 오른쪽 20 픽셀을 어떻게 유지할 수 있습니까? 이에 대한 한 가지 해결책은 나머지 foobar를 숨기기 위해 즉시 흰색 상자를 렌더링하는 것입니다. 그러나이 솔루션은 통합하려는 다른 기능과 호환되지 않습니다. 나머지 foobar가 처음부터 렌더링되지 않도록하는 방법이 필요합니다. 캔버스에서 가능합니까 아니면 다른 그래픽 API를 사용해야합니까?
.clip()경로를 사용하여 마스크를 만들 수 있습니다. 이것은 다양한 경로 방법 과 결합 하여 텍스트의 잘린 버전을 그릴 수 있습니다.
MDN 페이지의 예에서는 원을 사용하여 사각형을 마스킹합니다.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();
// Draw stuff that gets clipped
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 100);<canvas id="canvas"></canvas>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다