HTML5のCanvasについて

現在Canvasを勉強しています
今作ろうとしているものが
ランダムにカラーと座標とサイズを決めた円を50個描画する
というこのなのですが一回しか描画できません
どこを改善すればいいのでしょうか？

JavaScript
1
2<!doctype html>
3<html>
4<head>
5  <meta charset="utf-8">
6</head>
7<body bgcolor="#000">
8  <canvas height="600" width="800" id = "mycanvas"></canvas>
9<script>
10  var canvas = document.getElementById('mycanvas');
11  var ctx = canvas.getContext('2d');
12  var r = Math.floor(Math.random() * (256));
13  var g = Math.floor(Math.random() * (256));
14  var b = Math.floor(Math.random() * (256));
15  var y = Math.floor(Math.random() * (550));
16  var x = Math.floor(Math.random() * (750));
17  var pi = Math.floor(Math.random() * (50));
18  for(var i = 0; i < 50; i++){
19    ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
20    ctx.arc(x,y,pi,10/180*Math.PI,360/180*Math.PI);
21    ctx.fill();
22  }
23
24</script>
25
26</body>
27</html>
28

行動規範の内容に同意します

回答3件

ベストアンサー

やりたいことはこちらでしょうか?

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5</head>
6<body bgcolor="#000">
7<canvas height="600" width="800" id = "mycanvas"></canvas>
8<script>
9	var canvas = document.getElementById('mycanvas');
10	var ctx = canvas.getContext('2d');
11	for (var i = 0; i < 50; i++) {
12		ctx.beginPath();
13		var r = Math.floor(Math.random() * 256);
14		var g = Math.floor(Math.random() * 256);
15		var b = Math.floor(Math.random() * 256);
16		var y = Math.floor(Math.random() * 550);
17		var x = Math.floor(Math.random() * 750);
18		var pi = Math.floor(Math.random() * 50);
19		ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
20		ctx.arc(x, y, pi, 0, 360 / 180 * Math.PI);
21		ctx.fill();
22	}
23</script>
24</body>
25</html>

投稿2015/07/22 11:47

編集2015/07/22 11:50

rik

総合スコア1151

Yoshinori

2015/07/22 11:49

ありがとうございます！！思い通りのものになりました！！

行動規範の内容に同意します

50個描画できてると思いますよ。

ヒント）ただし、全部同じ場所に、同じ色で。

投稿2015/07/22 11:39

sharow

総合スコア1149

ランダムな値をfor文内で生成していないので、同じ場所に、同じ大きさで、同じ色で50回描画しているからです。
質問通りに描画するにはfor文内で1ループ毎にランダムな値を生成してやる必要があります。

投稿2015/07/22 11:40

shiolier

総合スコア1156

Yoshinori

2015/07/22 11:45

ありがとうございますですがforの中に入れると円ではないものが描画されてしまいますなぜなのでしょうか？

edom18

2015/07/23 01:10

arcは円を描くためのものではなく、円の「パス」を描くためのものです。なので、beginPath()やclosePath()を実行しないと、前の円のパスと次の円のパスがつながってしまって不可解な図形が描画されているのだと思います。 AdobeのIllustratorを使ったことがあると少しイメージがしやすいかと思います。（パスを閉じずにいたら変な図形になっていくあれです）

行動規範の内容に同意します

あなたの回答