3

キャンバスに図形をランダムに表示し、表示された位置にとどまる方法を教えてください。現在、押すと3つの形状が表示されるボタンがありますが、ボタンをもう一度押すまで、これらの3つの形状をキャンバスの周りに連続して表示したいと思います。

HTML:

<canvas id="example1" width="800" height="600">
    <p class="canvas-no-support">Your Browser Does Not Support HTML5 canvas!</p>
</canvas>

<button onclick="start()">Go!!</button>

脚本：

function start() {
    setInterval(draw, 100);
}

function draw() {
    // get the canvas element using the DOM
    var canvas = document.getElementById('example1');

    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext) {

        var context = canvas.getContext('2d');

        //Red Square

        function dSqu() {
            context.strokeStyle = "rgb(255,215,0)"; //Yellow Outline
            context.fillStyle = "rgb(200,0,0)";
            context.lineWidth = 4; //Stroke Thickness
            context.fillRect(75, 75, 137, 137);
            context.strokeRect(75, 75, 137, 137); //Outline
        }

        function dCir() {
            //Purple Circle
            context.beginPath();
            context.arc(380, 137, 100, 0, Math.PI * 2, true);
            context.fillStyle = "rgb(200,80,200)";
            context.fill();
            context.lineWidth = 4; //Stroke Thickness
            context.strokeStyle = "rgb(255,215,0)";
            context.stroke();
        }

        function dTri() {
            //Green Triangle
            context.beginPath();
            context.fillStyle = "rgb(0,200,0)";
            context.moveTo(100, 100);
            context.lineTo(300, 100);
            context.lineTo(200, 200);
            context.lineTo(100, 100);
            context.fill();
            context.strokeStyle = "rgb(255,215,0)";
            context.stroke();
            ctx.closePath();
        }

        dSqu();
        dCir();
        dTri();

    } else {
        document.write('Your Browser does not support HTML5 Canvas.');
    }
}​
4

2 に答える 2

2

setIntervalを使用して繰り返し操作を行い、Math.random()を使用して乱数を取得します。

例えば ​​：

var functions = [dSqu, dCir, dTri];
setInterval(function(){
   functions[Math.floor(Math.random()*functions.length)]();
}, 200);

これにより、200 ミリ秒ごとに 3 つの関数 ( dSqu、dCirまたはdTri) のうちの 1 つがランダムに呼び出されます。

これを機能させるには、関数を表示する必要があります。たとえば、コードを次のように変更できます

<script>
var canvas = document.getElementById('example1');
var context = canvas.getContext('2d');
function dSqu(){    
    ...
}
function dCir(){    
    ...
}
function dTri(){
    ...
}
var functions = [dSqu, dCir, dTri];
setInterval(function(){
   functions[Math.floor(Math.random()*functions.length)]();
}, 200);
</script>
于 2012-11-08T20:33:58.060 に答える