Q&A
ありがとうございます！
おっしゃる通りですね(*_*)
HTMLの基本の作法のようなものを学べて助かりました
Javascriptでボイド（群れのシミュレーション）が背景画像を塗りつぶすようにしたいのですが、背景画像をボイドを重ね合わせたり、ボイドに対してbackground-imageを設定することが出来ませんことが出来ません。
HTML
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title>BakuBag（MemoryEater）</title> 4<style>body{margin:0;padding:0;}</style> 5<canvas id="world"></canvas> 6<link rel="stylesheet" href="stylesheet.css"> 7<div> 8 <script src="bakubag.js"></script> 9</div>
Javascript
1var FPS = 30; // フレームレート 2var SCREEN_SIZE = 500; // 画面サイズ 3var NUM_BOIDS = 150; // ボイドの数 4var BOID_SIZE = 10; // ボイドの大きさ 5var MAX_SPEED = 600; // ボイドの最大速度 6var canvas = document.getElementById('world'); 7var ctx = canvas.getContext('2d'); 8var boids = []; // ボイド 9 10 11 12window.onload = function() { 13 /* 初期化 */ 14 canvas.width = canvas.height = SCREEN_SIZE; 15 ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; // ボイドの色 16 for (var i=0; i<NUM_BOIDS; ++i) { 17 boids[i] = { 18 x: Math.random()*SCREEN_SIZE, // x座標 19 y: Math.random()*SCREEN_SIZE, // y座標 20 vx: 0, // x方向の速度 21 vy: 0 // y方向の速度 22 } 23 } 24 /* ループ開始 */ 25 setInterval(simulate, 1000/FPS); 26}; 27 28var simulate = function() { 29 draw(); // ボイドの描画 30 move(); // ボイドの座標の更新 31}; 32/** 33 * ボイドの描画 34 */ 35var draw = function() { 36 // 画面をクリア 37 // 全てのボイドの描画 38 for (var i=0,len=boids.length; i<len; ++i) { 39 ctx.fillRect(boids[i].x-BOID_SIZE/2, boids[i].y-BOID_SIZE/2, BOID_SIZE, BOID_SIZE); 40 } 41}; 42/** 43 * ボイドの位置の更新 44 */ 45var move = function() { 46 for (var i=0,len=boids.length; i<len; ++i) { 47 // ルールを適用して速さを変更 48 rule1(i); // 近くの群れの真ん中に向かおうとする 49 rule2(i); // ボイドは他のボイドと距離を取ろうとする 50 rule3(i); // ボイドは他のボイドの平均速度に合わせようとする 51 // limit speed 52 var b = boids[i]; 53 var speed = Math.sqrt(b.vx*b.vx + b.vy*b.vy); 54 if (speed >= MAX_SPEED) { 55 var r = MAX_SPEED / speed; 56 b.vx *= r; 57 b.vy *= r; 58 } 59 // 壁の外に出てしまった場合速度を内側へ向ける 60 if (b.x<0 && b.vx<0 || b.x>SCREEN_SIZE && b.vx>0) b.vx *= -1; 61 if (b.y<0 && b.vy<0 || b.y>SCREEN_SIZE && b.vy>0) b.vy *= -1; 62 // 座標の更新 63 b.x += b.vx; 64 b.y += b.vy; 65 } 66}; 67/** 68 * ルール1: ボイドは近くに存在する群れの中心に向かおうとする 69 */ 70var rule1 = function(index) { 71 var c = {x: 0, y:0}; // 自分を除いた群れの真ん中 72 for (var i=0,len=boids.length; i<len; ++i) { 73 if (i != index) { 74 c.x += boids[i].x; 75 c.y += boids[i].y; 76 } 77 } 78 c.x /= boids.length - 1; 79 c.y /= boids.length - 1; 80 boids[index].vx += (c.x-boids[index].x) / 100; 81 boids[index].vy += (c.y-boids[index].y) / 100; 82}; 83/** 84 * ルール2: ボイドは隣のボイドとちょっとだけ距離をとろうとする 85 */ 86var rule2 = function(index) { 87 for (var i=0,len=boids.length; i<len; ++i) { 88 if (i != index) { 89 var d = getDistance(boids[i], boids[index]); // ボイド間の距離 90 if (d < 5) { 91 boids[index].vx -= boids[i].x - boids[index].x; 92 boids[index].vy -= boids[i].y - boids[index].y; 93 } 94 } 95 } 96}; 97/** 98 * ルール3: ボイドは近くのボイドの平均速度に合わせようとする 99 */ 100var rule3 = function(index) { 101 var pv = {x: 0, y: 0}; // 自分を除いた群れの平均速度 102 for (var i=0,len=boids.length; i<len; ++i) { 103 if (i != index) { 104 pv.x += boids[i].vx; 105 pv.y += boids[i].vy; 106 } 107 } 108 pv.x /= boids.length - 1; 109 pv.y /= boids.length - 1; 110 boids[index].vx += (pv.x-boids[index].vx) / 8; 111 boids[index].vy += (pv.y-boids[index].vy) / 8; 112}; 113/** 114 * 2つのボイド間の距離 115 */ 116var getDistance = function(b1, b2) { 117 var x = b1.x - b2.x; 118 var y = b1.y - b2.y; 119 return Math.sqrt(x*x + y*y); 120};
CSS
1div { 2 background-image: url(https://rr.img.naver.jp/mig?src=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20150327%2F67%2F6958377%2F2%2F1593x900x25ac922fae9c3d7642663d7.jpg%2F300%2F600&twidth=300&theight=600&qlt=80&res_format=jpg&op=r); 3 4}
回答2件
0
ベストアンサー
質問文のCSSで背景画像が表示されない原因は**div要素に幅、高さが設定されていないため**です。
HTML
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title>BakuBag（MemoryEater）</title> 4<style> 5 html, body { 6 width: 100%; 7 height: 100%; 8 } 9 10 body { 11 margin: 0; 12 padding: 0; 13 } 14 15 div { 16 background-image: url(); 17 width: 100%; 18 height: 100%; 19 } 20</style> 21<canvas id="world"></canvas> 22<div> 23 <script> 24 var FPS = 30; // フレームレート 25 var SCREEN_SIZE = 500; // 画面サイズ 26 var NUM_BOIDS = 150; // ボイドの数 27 var BOID_SIZE = 10; // ボイドの大きさ 28 var MAX_SPEED = 600; // ボイドの最大速度 29 var canvas = document.getElementById('world'); 30 var ctx = canvas.getContext('2d'); 31 var boids = []; // ボイド 32 33 34 window.onload = function () { 35 /* 初期化 */ 36 canvas.width = canvas.height = SCREEN_SIZE; 37 ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; // ボイドの色 38 for (var i = 0; i < NUM_BOIDS; ++i) { 39 boids[i] = { 40 x: Math.random() * SCREEN_SIZE, // x座標 41 y: Math.random() * SCREEN_SIZE, // y座標 42 vx: 0, // x方向の速度 43 vy: 0 // y方向の速度 44 } 45 } 46 /* ループ開始 */ 47 setInterval(simulate, 1000 / FPS); 48 }; 49 50 var simulate = function () { 51 draw(); // ボイドの描画 52 move(); // ボイドの座標の更新 53 }; 54 /** 55 * ボイドの描画 56 */ 57 var draw = function () { 58 // 画面をクリア 59 // 全てのボイドの描画 60 for (var i = 0, len = boids.length; i < len; ++i) { 61 ctx.fillRect(boids[i].x - BOID_SIZE / 2, boids[i].y - BOID_SIZE / 2, BOID_SIZE, BOID_SIZE); 62 } 63 }; 64 /** 65 * ボイドの位置の更新 66 */ 67 var move = function () { 68 for (var i = 0, len = boids.length; i < len; ++i) { 69 // ルールを適用して速さを変更 70 rule1(i); // 近くの群れの真ん中に向かおうとする 71 rule2(i); // ボイドは他のボイドと距離を取ろうとする 72 rule3(i); // ボイドは他のボイドの平均速度に合わせようとする 73 // limit speed 74 var b = boids[i]; 75 var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy); 76 if (speed >= MAX_SPEED) { 77 var r = MAX_SPEED / speed; 78 b.vx *= r; 79 b.vy *= r; 80 } 81 // 壁の外に出てしまった場合速度を内側へ向ける 82 if (b.x < 0 && b.vx < 0 || b.x > SCREEN_SIZE && b.vx > 0) b.vx *= -1; 83 if (b.y < 0 && b.vy < 0 || b.y > SCREEN_SIZE && b.vy > 0) b.vy *= -1; 84 // 座標の更新 85 b.x += b.vx; 86 b.y += b.vy; 87 } 88 }; 89 /** 90 * ルール1: ボイドは近くに存在する群れの中心に向かおうとする 91 */ 92 var rule1 = function (index) { 93 var c = {x: 0, y: 0}; // 自分を除いた群れの真ん中 94 for (var i = 0, len = boids.length; i < len; ++i) { 95 if (i != index) { 96 c.x += boids[i].x; 97 c.y += boids[i].y; 98 } 99 } 100 c.x /= boids.length - 1; 101 c.y /= boids.length - 1; 102 boids[index].vx += (c.x - boids[index].x) / 100; 103 boids[index].vy += (c.y - boids[index].y) / 100; 104 }; 105 /** 106 * ルール2: ボイドは隣のボイドとちょっとだけ距離をとろうとする 107 */ 108 var rule2 = function (index) { 109 for (var i = 0, len = boids.length; i < len; ++i) { 110 if (i != index) { 111 var d = getDistance(boids[i], boids[index]); // ボイド間の距離 112 if (d < 5) { 113 boids[index].vx -= boids[i].x - boids[index].x; 114 boids[index].vy -= boids[i].y - boids[index].y; 115 } 116 } 117 } 118 }; 119 /** 120 * ルール3: ボイドは近くのボイドの平均速度に合わせようとする 121 */ 122 var rule3 = function (index) { 123 var pv = {x: 0, y: 0}; // 自分を除いた群れの平均速度 124 for (var i = 0, len = boids.length; i < len; ++i) { 125 if (i != index) { 126 pv.x += boids[i].vx; 127 pv.y += boids[i].vy; 128 } 129 } 130 pv.x /= boids.length - 1; 131 pv.y /= boids.length - 1; 132 boids[index].vx += (pv.x - boids[index].vx) / 8; 133 boids[index].vy += (pv.y - boids[index].vy) / 8; 134 }; 135 /** 136 * 2つのボイド間の距離 137 */ 138 var getDistance = function (b1, b2) { 139 var x = b1.x - b2.x; 140 var y = b1.y - b2.y; 141 return Math.sqrt(x * x + y * y); 142 }; 143 </script> 144</div>
また、質問文から質問者さんが想像している動作は以下のようなものだと思うのですが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title>BakuBag（MemoryEater）</title> 4<style> 5 html, body { 6 width: 100%; 7 height: 100%; 8 } 9 10 body { 11 margin: 0; 12 padding: 0; 13 } 14 15 canvas { 16 background-image: url(); 17 } 18</style> 19<canvas id="world"></canvas> 20<div> 21 <script> 22 var FPS = 30; // フレームレート 23 var SCREEN_SIZE = 500; // 画面サイズ 24 var NUM_BOIDS = 150; // ボイドの数 25 var BOID_SIZE = 10; // ボイドの大きさ 26 var MAX_SPEED = 600; // ボイドの最大速度 27 var canvas = document.getElementById('world'); 28 var ctx = canvas.getContext('2d'); 29 var boids = []; // ボイド 30 31 32 window.onload = function () { 33 /* 初期化 */ 34 canvas.width = canvas.height = SCREEN_SIZE; 35 ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; // ボイドの色 36 for (var i = 0; i < NUM_BOIDS; ++i) { 37 boids[i] = { 38 x: Math.random() * SCREEN_SIZE, // x座標 39 y: Math.random() * SCREEN_SIZE, // y座標 40 vx: 0, // x方向の速度 41 vy: 0 // y方向の速度 42 } 43 } 44 /* ループ開始 */ 45 setInterval(simulate, 1000 / FPS); 46 }; 47 48 var simulate = function () { 49 draw(); // ボイドの描画 50 move(); // ボイドの座標の更新 51 }; 52 /** 53 * ボイドの描画 54 */ 55 var draw = function () { 56 // 画面をクリア 57 // 全てのボイドの描画 58 for (var i = 0, len = boids.length; i < len; ++i) { 59 ctx.fillRect(boids[i].x - BOID_SIZE / 2, boids[i].y - BOID_SIZE / 2, BOID_SIZE, BOID_SIZE); 60 } 61 }; 62 /** 63 * ボイドの位置の更新 64 */ 65 var move = function () { 66 for (var i = 0, len = boids.length; i < len; ++i) { 67 // ルールを適用して速さを変更 68 rule1(i); // 近くの群れの真ん中に向かおうとする 69 rule2(i); // ボイドは他のボイドと距離を取ろうとする 70 rule3(i); // ボイドは他のボイドの平均速度に合わせようとする 71 // limit speed 72 var b = boids[i]; 73 var speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy); 74 if (speed >= MAX_SPEED) { 75 var r = MAX_SPEED / speed; 76 b.vx *= r; 77 b.vy *= r; 78 } 79 // 壁の外に出てしまった場合速度を内側へ向ける 80 if (b.x < 0 && b.vx < 0 || b.x > SCREEN_SIZE && b.vx > 0) b.vx *= -1; 81 if (b.y < 0 && b.vy < 0 || b.y > SCREEN_SIZE && b.vy > 0) b.vy *= -1; 82 // 座標の更新 83 b.x += b.vx; 84 b.y += b.vy; 85 } 86 }; 87 /** 88 * ルール1: ボイドは近くに存在する群れの中心に向かおうとする 89 */ 90 var rule1 = function (index) { 91 var c = {x: 0, y: 0}; // 自分を除いた群れの真ん中 92 for (var i = 0, len = boids.length; i < len; ++i) { 93 if (i != index) { 94 c.x += boids[i].x; 95 c.y += boids[i].y; 96 } 97 } 98 c.x /= boids.length - 1; 99 c.y /= boids.length - 1; 100 boids[index].vx += (c.x - boids[index].x) / 100; 101 boids[index].vy += (c.y - boids[index].y) / 100; 102 }; 103 /** 104 * ルール2: ボイドは隣のボイドとちょっとだけ距離をとろうとする 105 */ 106 var rule2 = function (index) { 107 for (var i = 0, len = boids.length; i < len; ++i) { 108 if (i != index) { 109 var d = getDistance(boids[i], boids[index]); // ボイド間の距離 110 if (d < 5) { 111 boids[index].vx -= boids[i].x - boids[index].x; 112 boids[index].vy -= boids[i].y - boids[index].y; 113 } 114 } 115 } 116 }; 117 /** 118 * ルール3: ボイドは近くのボイドの平均速度に合わせようとする 119 */ 120 var rule3 = function (index) { 121 var pv = {x: 0, y: 0}; // 自分を除いた群れの平均速度 122 for (var i = 0, len = boids.length; i < len; ++i) { 123 if (i != index) { 124 pv.x += boids[i].vx; 125 pv.y += boids[i].vy; 126 } 127 } 128 pv.x /= boids.length - 1; 129 pv.y /= boids.length - 1; 130 boids[index].vx += (pv.x - boids[index].vx) / 8; 131 boids[index].vy += (pv.y - boids[index].vy) / 8; 132 }; 133 /** 134 * 2つのボイド間の距離 135 */ 136 var getDistance = function (b1, b2) { 137 var x = b1.x - b2.x; 138 var y = b1.y - b2.y; 139 return Math.sqrt(x * x + y * y); 140 }; 141 </script> 142</div>
投稿2017/08/14 20:03
総合スコア14731
0
その位置のdivに背景をつけても高さが無いので表示されません。
CSS
1canvas { 2 background-image: url(/*省略*/); 3}
HTMLは、htmlとheadとbodyくらい使いましょう。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>BakuBag（MemoryEater）</title> 6 <style>body{margin:0;padding:0;}</style> 7 <link rel="stylesheet" href="stylesheet.css"> 8 <script src="bakubag.js"></script> 9 </head> 10 <body> 11 <canvas id="world"></canvas> 12 </body> 13</html> 14```**動くサンプル：**[https://jsfiddle.net/y88s3634/](https://jsfiddle.net/y88s3634/)
投稿2017/08/14 19:40
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/14 22:43
退会済みユーザー
2017/08/14 23:00
2017/08/15 13:12