如何在画布上绘制大量的点（带有规则图案）？

Question

这些点被排列成它们之间有规则的距离。

它们是在（x％4 == 0）和（y％4 == 0）绘制的，它们需要时间以蛮力的方式绘制：

for (var x = 0; x < width; x+=4) {
    for (var y = 0; y < height; y+=4) {
        draw(x, y, 1, 1);
    }
}

如何以更好的方式做到这一点？

Answer 1

您可以先使用createPattern()创建一个屏幕外画布，在其中绘制一个点，然后将该画布用作createPattern()的图像源。将模式设置为fillStyle并填充。

var ctx = c.getContext("2d");
var pattern = ctx.createPattern(createPatternImage(), "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, c.width, c.height);

function createPatternImage() {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 4;   // = size of pattern base
  ctx.fillStyle = "#fff";
  ctx.fillRect(0,0,1,1);
  return ctx.canvas;                          // canvas can be used as image source
}

<canvas id=c style="background:#c00"></canvas>

如果这不是一个选项，您可以随时优化现有代码，不填充每个点，但添加到路径并填写一次：

var ctx = c.getContext("2d");   // obtain only one time.
var width = c.width, height = c.height;

ctx.beginPath();                // clear path if it has been used previously
ctx.fillStyle = "#fff";          

for (var x = 0; x < width; x+=4) {
    for (var y = 0; y < height; y+=4) {
        draw(x, y, 1, 1);
    }
}

// modify method to add to path instead
function draw(x,y,width,height) {
  ctx.rect(x,y,width,height);
}

// when done, fill once
ctx.fill();

<canvas id=c style="background:#c00"></canvas>