javascript - 24 次迭代 javascript 循环仅显示 10 个 Canvas

Question

我想生成 24 个 Canvas ，但页面上只显示 10 个。我无法使用整个宽度，也无法真正弄清楚为什么。下面是一段代码来说明我的示例:https://jsfiddle.net/bLr83jyn/2/

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'purple'];

function MakeCanvas(x, y, w, h, color) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

var x = 0;
var y = 0;
var w = 30;
var h = w * 1.5;
var offset = w;

for (var i = 0; i < 24; i++) {
  MakeCanvas(x, y, w, h, colors[i % colors.length]);
  x = x + offset;
}

<canvas id="canvas"></canvas>

知道出了什么问题吗？

Answer 1

您没有指定 Canvas 的大小，因此它使用默认大小 300 x 150。因此，当您渲染 10 个矩形时，您已经用完了所有 300 px 的宽度，并且其余的都在 Canvas 边界之外绘制

如果您想要更大的 Canvas ，可以向 Canvas 元素添加属性。例如:

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'purple'];

function MakeCanvas(x, y, w, h, color) {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

var x = 0;
var y = 0;
var w = 30;
var h = w * 1.5;
var offset = w;

for (var i = 0; i < 24; i++) {
  MakeCanvas(x, y, w, h, colors[i % colors.length]);
  x = x + offset;
}

    <canvas id="canvas" width="600" height="300"></canvas>

这个可以让你在空间用完之前容纳 20 个 30px 宽的矩形。或者，您可以渲染较小的矩形。仅取决于您想要做什么。