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 毫秒调用一次随机获取的三个函数（dSqu或dCir）dTri之一。

为了让这个工作，你需要有可见的功能。例如，您可以将代码更改为

<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 回答
1

这段代码对我很有效，应该对你有用

<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>
于 2013-12-17T07:18:02.393 回答