javascript - canvas畫多個小球，怎麼能讓每個小球的背景圖片不一樣，可以做到麼？

Question

問題：canvas畫多個小球，怎麼使每個小球的背景圖片不一樣，可以做到麼？
現在做到的只是每個小球不同的顏色，我想用圖片填滿。

部分程式碼：

`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();`

目前效果：

Answer 1

你把img標籤裡的連結改下，然後把程式碼複製貼上到你本地測試。不過說實話，用背景平鋪來實現畫圖很不好控制。
我給你另外一個建議就是先用drawImage畫好，然後再透過globalCompositeOperation來截取圓形。

<img src="AN_1.png"><br/>
<canvas id="canvas" width="300" height="300" style="background:#000;"></canvas>
<script type="text/javascript">
var cv = document.getElementById('canvas'),
    cxt = cv.getContext('2d'),
    img = document.querySelector("img");

var pt = cxt.createPattern(img,"repeat");
cxt.fillStyle = pt;

cxt.save();
cxt.arc(canvas.width/2,canvas.height/2,100,0,Math.PI * 2, true);
cxt.fill();
cxt.restore();
</script>

Answer 2

grd.addColorStop(0,"#eee");
grd.addColorStop(1,ballArray[i].color);
cxt.fillStyle=grd;
cxt.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r, 0, Math.PI * 2, true);

這樣寫成漸變了...效果差不多了，雖然很醜。 。

更新...

Answer 3

漸層 隨機顏色 隨機 透明度

Answer 4

感覺你那個註解掉的程式碼不就是嗎

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

這是我寫的demo，不過沒測相容性

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