时间戳

首页 > 解决方案 > 使用 html5 画布创建大量矩形

javascript - 使用 html5 画布创建大量矩形

问题描述

我正在用javascript创建一个程序，它接受一个数字，将其转换为二进制，然后根据它们对应于二进制数中的一个还是零来填充一系列单元格。我开始创建机制。

要一次填写多个单元格，我正在使用以下代码：

function init() {
  canvas = document.getElementById("display");
  ctx = canvas.getContext('2d');
  draw();
}

function draw() {
  for (var x = 0; x += 25; x < 250) {
    for (var y = 0; y += 25; y < 250) {
      if (y % 2 == 0) {
        ctx.fillStyle = "rgb(0, 0, 0)";
      } else {
        ctx.fillStyle = "rgb(255, 255, 255)";
      }
      ctx.fillRect(x, y, 25, 25);
    }
  }
}


window.onload = init;

这似乎是一种非常糟糕的做法。它会导致一些单元格没有被填充，使程序非常慢，并完全停止它。我能想到的唯一选择是数百行ctx.fillRect(). 有没有更好的方法来填充许多矩形？

标签： javascripthtml5-canvas

解决方案

这是因为您的代码中有一个无限循环。

请记住，for循环的语法是：

for(variable;condition;variable-change) {
//block of code
}

您切换了conditionandvariable-change段，使其成为无限，因为x += 25不是可以评估为trueor的条件false。相反，这将始终是true因为您只是为变量分配了一个新值。

推荐阅读