javascript - 如何在 Canvas 上绘制大量点(具有规则图案)？

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()首先创建一个离屏 Canvas ，在其中画一个点，然后将该 Canvas 用作 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>