問題: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();`
目前效果:
高洛峰2017-06-14 10:56:28
你把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>
代言2017-06-14 10:56:28
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);
這樣寫成漸變了...效果差不多了,雖然很醜。 。
更新...
女神的闺蜜爱上我2017-06-14 10:56:28
感覺你那個註解掉的程式碼不就是嗎
// var pat=cxt.createPattern(img,"no-repeat");
// cxt.fillStyle = pat;
這是我寫的demo,不過沒測相容性
https://codepen.io/jackpan/pe...