질문: 캔버스에 여러 개의 공을 그릴 때 각 공의 배경 이미지를 다르게 만들 수 있나요? 지금까지 한 일은 각 공을 다른 색상으로 만들고, 그림으로 채우고 싶습니다.
코드 부분:
현재 효과:
光阴似箭催人老，日月如移越少年。
img 태그의 링크를 변경한 다음 코드를 복사하여 로컬 테스트에 붙여넣습니다. 그러나 솔직히 말해서 배경 타일링을 사용하여 그림을 그리는 것은 제어하기가 매우 어렵습니다. 제가 드리는 또 다른 제안은 drawImage를 사용하여 먼저 그린 다음 globalCompositeOperation을 사용하여 원을 가로채는 것입니다.
으아악
이렇게 그라데이션으로 작성... 아주 보기 흉하긴 하지만 효과는 거의 같습니다. .
업데이트...
그라디언트 무작위 색상 무작위 투명도
귀하의 주석 처리된 코드가 바로 그런 것 같습니다
// var pat=cxt.createPattern(img,"no-repeat");// cxt.fillStyle = pat;
이것은 제가 작성한 데모이지만 호환성은 테스트되지 않았습니다
https://codepen.io/jackpan/pe...
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
img 태그의 링크를 변경한 다음 코드를 복사하여 로컬 테스트에 붙여넣습니다. 그러나 솔직히 말해서 배경 타일링을 사용하여 그림을 그리는 것은 제어하기가 매우 어렵습니다.
으아악제가 드리는 또 다른 제안은 drawImage를 사용하여 먼저 그린 다음 globalCompositeOperation을 사용하여 원을 가로채는 것입니다.
으아악
이렇게 그라데이션으로 작성... 아주 보기 흉하긴 하지만 효과는 거의 같습니다. .
업데이트...
그라디언트 무작위 색상 무작위 투명도
귀하의 주석 처리된 코드가 바로 그런 것 같습니다
// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;
이것은 제가 작성한 데모이지만 호환성은 테스트되지 않았습니다
https://codepen.io/jackpan/pe...