Question

当用户加载页面时，我想绘制一个随机的形状。例如一个圆圈。当用户再次加载页面时，我想绘制另一个随机形状。

我知道如何绘制形状，但我可以让它们随机出现吗？

Answer 1

您可以使用Math.Floor函数生成随机数，然后使用该随机数您可以使用它从数组中绘制特定形状。

由于你没有提供你的数组，我已经创建了一个非常简单的jsFiddle，显示了一个例子https://jsfiddle.net/kny74wve/只需按住左上角的运行按钮即可生成一个新的随机数

HTML

<canvas id="Canvas" width="400" height="400"></canvas>

的Javascript

var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#AAA";
context.fillRect(0, 0, 400, 400);

var randomShape = Math.floor((Math.random() * 3) + 1);

if (randomShape == 1) {
    context.beginPath();
    context.rect(25, 50, 200, 100);
    context.fillStyle = '#00FF00';
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = '#000';
    context.stroke();
} else if (randomShape == 2) {
    context.beginPath();
    context.arc(200, 200, 69, 0, 2 * Math.PI, false);
    context.fillStyle = '#FF0000';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#000';
    context.stroke();
} else if (randomShape == 3) {
    context.beginPath();
    context.arc(276, 255, 70, 0, Math.PI, false);
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#0000FF';
    context.fill();
    context.strokeStyle = '#000';
    context.stroke();
}

Javascript Canvas如何绘制随机形状？

1 个答案: