javascript - Random shapes appearing on canvas - Stack Overflow

admin管理员组

文章数量:1406154

I would like some help on making shapes randomly appear on my canvas and staying in the position they appear. Currently i have a button which when pressed three shapes appear, but I would like these three shapes to appear continously around the canvas until the button is pressed again.

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>

Script:

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.');
    }
}​

I would like some help on making shapes randomly appear on my canvas and staying in the position they appear. Currently i have a button which when pressed three shapes appear, but I would like these three shapes to appear continously around the canvas until the button is pressed again.

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>

Script:

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.');
    }
}​

• javascript
• html
• canvas

Share Improve this question Follow edited Nov 8, 2012 at 21:01 katspaugh 17.9k1212 gold badges6767 silver badges105105 bronze badges asked Nov 8, 2012 at 20:31 user1810449user1810449 17344 gold badges55 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Use setInterval to make a repeating operation and Math.random() to get a random number.

For example :

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

This would call every 200 millisecondes one of your three functions (dSqu, dCir or dTri), taken randomly.

In order to have this working, you need to have the functions visible. You may for example change your code to

<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>

This code works well for me and should work for you

<script>

function drawShapes(l,w,x,y,colourOfLines,colourOfRect){
    var c=document.getElementById("c1");
    var ctx=c.getContext("2d");
    ctx.rect(x,y,l,w);
    ctx.fillStyle=colourOfRect;
    ctx.fill();
    ctx.strokeStyle=colourOfLines;
    ctx.strokeRect(x,y,l,w);
    }
for (i=0;i<=32;i++){
    l=Math.floor((Math.random()*200)+1);
    w=Math.floor((Math.random()*200)+1);
    x=Math.floor((Math.random()*800)+1);
    y=Math.floor((Math.random()*800)+1);
    x1=Math.floor((Math.random()*555)+1);
    c2=Math.floor((Math.random()*555)+1);
    c3=Math.floor((Math.random()*555)+1);
    c4=Math.floor((Math.random()*555)+1);
    c5=Math.floor((Math.random()*255)+1);
    c6=Math.floor((Math.random()*223)+1);
    drawShapes(l,w,x,y,"rgb(221,23,263)","rgb(c4,c5,c6)")
    }

</script>

本文标签： javascriptRandom shapes appearing on canvasStack Overflow