javascript - 각 공의 배경 이미지가 다르도록 캔버스에 여러 공을 그리는 방법이 가능합니까?

Question

질문: 캔버스에 여러 개의 공을 그릴 때 각 공의 배경 이미지를 다르게 만들 수 있나요?
지금까지 한 일은 각 공을 다른 색상으로 만들고, 그림으로 채우고 싶습니다.

코드 부분:

으아악

현재 효과:

Answer 1

img 태그의 링크를 변경한 다음 코드를 복사하여 로컬 테스트에 붙여넣습니다. 그러나 솔직히 말해서 배경 타일링을 사용하여 그림을 그리는 것은 제어하기가 매우 어렵습니다.
제가 드리는 또 다른 제안은 drawImage를 사용하여 먼저 그린 다음 globalCompositeOperation을 사용하여 원을 가로채는 것입니다.

으아악

Answer 2

으아악

이렇게 그라데이션으로 작성... 아주 보기 흉하긴 하지만 효과는 거의 같습니다. .

업데이트...

Answer 3

그라디언트 무작위 색상 무작위 투명도

Answer 4

귀하의 주석 처리된 코드가 바로 그런 것 같습니다

// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;

이것은 제가 작성한 데모이지만 호환성은 테스트되지 않았습니다

https://codepen.io/jackpan/pe...