Question

我想要一些帮助，让我的画布上随机出现形状并保持它们出现的位置。目前我有一个按钮，按下时会出现三个形状，但我希望这三个形状连续出现在画布周围，直到再次按下该按钮。

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

Answer 1

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

Answer 2

此代码适用于我，应该适合您

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

随机形状出现在画布上

2 个答案: