Question

我想让程序绘制带有随机颜色的矩形图案。我需要制作随机颜色，使用JavaScript中的Math对象有一个随机数生成器。

模式需要使用setInterval函数每隔几秒更改一次颜色。让用户选择要包含在模式中的行数和列数。不知道从哪里开始，除了：

HTML

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

Answer 1

您只需根据行和列布置切片，并为每个颜色分量生成Math.random（）颜色：

Live demo

例如，此函数将返回一个随机颜色作为字符串，您可以直接在fillStyle属性上设置。：

function getRandomColor() {
    return 'rgb(' +                         /// build string
        ((Math.random() * 255)|0) + ',' +   /// R component
        ((Math.random() * 255)|0) + ',' +   /// G component
        ((Math.random() * 255)|0) + ')';    /// B component
}

然后布置瓷砖：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    cw = canvas.width / cols,    /// get width of each cell
    ch = canvas.height / rows;   /// get height of each cell

function loop() {

    /// loop through rows and columns
    for(var y = 0; y < rows; y++) {
        for(var x = 0; x < cols; x++) {

            /// set random coloor
            ctx.fillStyle = getRandomColor();

            /// draw tile
            ctx.fillRect(x * cw, y * ch, cw, ch);
        }
    }
}

现在只需调用一次绘制然后设置间隔（以毫秒为单位）：

loop();
setInterval(loop, 2000); /// update every 2 seconds

提示：使用beginPath()时无需fillRect()，因为这不会在路径中添加任何内容，例如rect()。

希望这有帮助！

如何在javascript / html中制作画布API彩色瓷砖

1 个答案:

Live demo