Javascript 使用rect（）和fillRect（）进行画布优化

我试图画一个n乘n的正方形网格，其中每个正方形都由一层层的颜色组成。使用fillRect（）将颜色绘制到画布上似乎工作正常，并且没有浪费任何资源。但是，当我尝试使用rect（）在每个正方形周围添加边框时，性能明显下降

在每次调用下面的函数之前，我都使用clearRect（）清除画布

有关职能：

/**
 * Draws an n x n grid of layered color squares of the given width.
 * @param {int} `width`      The width of each square in the grid.
 * @param {int} `leftOffSet` The left margin of the grid.
 * @param {int} `topOffSet`  The top margin of the grid.
 * @param {int} `n`          The dimension of the grid.
 * @param {object} `layers'  A linked-list of color layers.
 */
function drawMap(width, leftOffSet, topOffSet, n, layers) {
    for (var i = 0; i < n; i++) {
        for (var j = 0; j < n; j++) {

            var currentLayer = layers[i][j];
            while (typeof currentLayer.tile !== 'undefined') {
                var bg = currentLayer.tile.background;

                context.fillStyle = 'rgba(' + bg.r + ',' + bg.g + ',' + bg.b + ',' + bg.a + ')';
                context.fillRect(i * width + leftOffSet, j * width + topOffSet, width, width);

                currentLayer = currentLayer.next;
            }

            // BOTTLE NECK APPEARS TO BE HERE
            /*context.beginPath();
            context.rect(i * width + leftOffSet, j * width + topOffSet, width, width);
            context.stroke();
            context.closePath();*/

        }
    }
}

/**
*绘制给定宽度的分层彩色方块的nxn网格。
*@param{int}`width`网格中每个正方形的宽度。
*@param{int}`leftOffSet`网格的左边距。
*@param{int}`topOffSet`网格的上边缘。
*@param{int}`n`网格的维度。
*@param{object}`layers'颜色层的链接列表。
*/
函数drawMap（宽度、左偏移、地形偏移、n、层）{
对于（变量i=0；i

---

当瓶颈被注释掉后，性能还可以，但一旦我取消注释该块，性能就会下降。有什么方法可以优化它吗？

将context.stroke放在循环之外

不需要按照您的定义对每个rect进行笔划，只需在末尾对context.stroke进行一次笔划即可

function drawMap(width, leftOffSet, topOffSet, n, layers) {

    // begin a new path
    context.beginPath();

    for (var i = 0; i < n; i++) {
        for (var j = 0; j < n; j++) {

            var currentLayer = layers[i][j];
            while (typeof currentLayer.tile !== 'undefined') {
                var bg = currentLayer.tile.background;

                context.fillStyle = 'rgba(' + bg.r + ',' + bg.g + ',' + bg.b + ',' + bg.a + ')';
                context.fillRect(i * width + leftOffSet, j * width + topOffSet, width, width);

                currentLayer = currentLayer.next;
            }

            // define new rects,
            //  but don't stroke every new rect
            context.rect(i * width + leftOffSet, j * width + topOffSet, width, width);

            // closePath is not needed if you're just rect-ing
            // context.closePath();


        }
    }

    // all done defining rects, now just do 1 stroke that draws them all
    context.stroke();

}

函数绘图图（宽度、左偏移、地形偏移、n、图层）{
//开辟一条新路
context.beginPath（）；
对于（变量i=0；i