間違いました。
PHPではなく、HTML5かjavascriptでした。
▽1
●
だわかき ●50ポイント ベストアンサー |
円の中心からの角度をランダムに発生させて、その上に丸を描くプログラムを作ってみました。PHPにGDが入っていることが前提です。
<?php define(X0, 250); //丸を乗せる円の中心座標(X0, Y0) define(Y0, 250); define(R0, 200); //丸を乗せる円の半径 define(R1, 20); //丸の半径 //ランダムに丸の中心座標を求める function getCoordinate() { $d = deg2rad(rand(0, 359)); $x = R0 * cos($d) + X0; $y = R0 * sin($d) + Y0; return array($x, $y); } header("Content-Type: image/png"); $img = imagecreatetruecolor(500, 500); $white = imagecolorallocate($img, 0xFF, 0xFF, 0xFF); $blue = imagecolorallocate($img, 0x00, 0x00, 0xFF); imagefill($img, 0, 0, $white); //背景を白色 //丸を7個ランダムに描く for ($i = 1; $i <= 7; $i++) { list($x, $y) = getCoordinate(); imagefilledarc($img, $x, $y, R1, R1, 0, 360, $blue, IMG_ARC_PIE); } imagepng($img); ?>
こんな感じでしょうか?
<script type='text/javascript'> CoordSupport = function() { this.init = function(cw, ch, x_min, x_max, y_min, y_max) { this.width_ = cw; this.height_ = ch; this.x_min_ = x_min; this.x_max_ = x_max; this.y_min_ = y_min; this.y_max_ = y_max; this.dx_ = (x_max - x_min) / cw; this.dy_ = (y_max - y_min) / ch; }; this.pixel = function(x, y) { var px = (x - this.x_min_) / (this.x_max_ - this.x_min_) * this.width_; var py = (this.y_max_ - y) / (this.y_max_ - this.y_min_) * this.height_; return {"x": px, "y": py}; }; }; function drunk_circle7() { var canvas = document.getElementById('canvas-d'); if (!canvas || !canvas.getContext) { alert("not support CANVAS !"); return false; } var cs = new CoordSupport(); cs.init(300, 300, -2, 2, -2, 2); canvas.width = cs.width_; canvas.height = cs.height_; var ctx = canvas.getContext('2d'); var PI2 = Math.PI * 2.0; var dt = PI2 / 7; var R = 1.0; var R_S = 20; // 円のずれ具合(ピクセル単位) var RAND_D = 10 for (var i = 0 ; i < 7 ; ++i) { t = PI2 / 4 - (PI2 / 7 * i) var x = R * Math.cos(t) var y = R * Math.sin(t) p = cs.pixel(x, y); dx = Math.random() * RAND_D - RAND_D / 2 dy = Math.random() * RAND_D - RAND_D / 2 // ちょっとずれてる円 ctx.strokeStyle = "green"; ctx.beginPath(); ctx.arc(p.x + dx, p.y + dy, R_S, 0, PI2, false); ctx.stroke(); ctx.closePath(); // ずれてない円 ctx.strokeStyle = "pink"; ctx.beginPath(); ctx.arc(p.x, p.y, R_S, 0, PI2, false); ctx.stroke(); ctx.closePath(); } } window.onload = function() { drunk_circle7(); }; </script> <canvas id="canvas-d"></canvas>
jsFiddle で試したのが、こちらです。
http://jsfiddle.net/a_kuma3/QTh35/embedded/result/