canvas上に複数の画像を複数個ランダムな場所に配置する方法を教えてください。
canvasのサイズは横1300px 縦700pxです。
背景画像も同上です。
背景画像の上に 横200px 縦100px程度の大きさの別の画像を
複数の画像種類、複数個、ランダムな場所に配置したいのですが、
表示されているすべての画像がわかるようにコンソールにだしているのですが、
配置されている画像とコンソールにでている枚数が合いません。
ctx.drawImage(imgGazo,100,100);
今は描画する座標の位置を100,100で固定にしてしまっていますが、
ここをランダムに枠内にうまく収めるような方法も教えていただけますでしょうか。
javascript
1 2 3 4var canvas = document.getElementById('ca'); 5var ctx = canvas.getContext('2d'); 6 7imgArr = [ 8 "画像url1", 9 "画像url2", 10 "画像url3", 11]; 12 13document.addEventListener("DOMContentLoaded",function(){ 14 draw(); 15}); 16 17function draw(){ 18 19 var backimg = new Image(); 20 backimg.src ="背景画像"; 21 22 backimg.onload = function(){ 23 ctx.drawImage(backimg,0,0); 24 } 25 26 27for(var i = 0; i < randomNm(1,10); i++){ 28 29 var imgGazo = new Image(); 30 var imgNo = Math.floor(Math.random()*imgArr.length); 31 32 imgGazo.src = imgArr[imgNo] 33 34 imgNeko.onload = function(){ 35 ctx.drawImage(imgGazo,100,100); 36 } 37} 38 39function randomNm(min,max){ 40 41 return Math.floor( Math.random() * (max + 1 - min) ) + min; 42} 43 44 45 46 47 48 49
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/15 11:03