javascript - 如何在 javascript/html 中制作 Canvas API 彩色图 block

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

您只需根据行和列布置图 block ，并使用 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
}

然后布置图 block :

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

提示:使用 fillRect() 时不需要 beginPath()，因为这不会向路径添加任何内容，例如 rect( ) 会的。

希望这有帮助!