캔버스의 이미지에 둥근 모서리가 있습니다.

Question

캔버스에 이미지가있는 캔버스가 있습니다. 이미지의 두 구석에 둥근 모서리를 넣으려고합니다. 나는 글로벌 운영자 중 한 명을 사용하는 방법을 생각하고 있지만 어떻게 할 수 있는지 알 수는 없습니다.

도움을 주시면 감사하겠습니다.

Answer 1

대신 글로벌 연산자를 사용하여, 당신은 이미지를 점유 할 공간을 파악

그 전에 문맥에이 경로를 넣어 (둥근 모서리를 제외하고 사각형 인 경로 여야 함) 당신은 당신의 이미지를 그리고, .clip()을 호출하고 그 다음 이미지를 그립니다.

이미지는 이미지의 두 모서리에 둥근 모서리가 그려집니다.

이제 실제 작업 만 수행하면됩니다. 한마디로

:

ctx.save(); 
ctx.beginPath(); 
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners. 
ctx.closePath(); 
ctx.clip(); 

// draw the image 
ctx.restore(); // so clipping path won't affect anything else drawn afterwards