Question: How to draw multiple small balls on the canvas so that the background image of each small ball is different? Is it possible?
What I want to do now is to make each ball a different color, and I want to fill it with pictures.
Part of the code:
`cxt.fillStyle = ballArray[i].color; // var pat=cxt.createPattern(img,"no-repeat"); // cxt.fillStyle = pat; cxt.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill();`Current effect:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You change the link in the img tag, then copy and paste the code to your local test. But to be honest, using background tiling to achieve drawing is very difficult to control.
Another suggestion I give you is to use drawImage to draw it first, and then use globalCompositeOperation to intercept the circle.
Written as a gradient like this... the effect is almost the same, although it is very ugly. .
Update...
Gradient Random Color Random Transparency
It feels like your commented out code is just that
// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;
This is a demo written by me, but the compatibility has not been tested
https://codepen.io/jackpan/pe...