javascript - HTML5 Canvas JavaScript十字线网格

我想制作一个十字线网格（每10像素）。
我有很多问题。是否可以比3x For循环更轻松地完成？
http://jsfiddle.net/TnnRp/1/

var canvas = document.getElementById('grid');
var context = canvas.getContext('2d');
// grid
var width = canvas.width;
var height = canvas.height;
var p = 10;
var h = 10;
for (var i = 10; i <= width - 5; i += 10) {
    for (var e = 10; e <= height - 5; e += 10) {
        context.moveTo(h + 0.5, e - 1);
        context.lineTo(h + 0.5, e + 2);
    }
    h += 10;
    for (var f = 10; f <= width - 5; f += 10) {
        context.moveTo(f - 1, p + 0.5);
        context.lineTo(f + 2, p + 0.5);
    }
    p += 10;
}
context.stroke();

最佳答案

您始终可以将其减少为两个循环，并且还有两种方法。但之前：我同意markE-您的代码就可以了。

我在这里的版本是减少循环并显示一种优化速度的方法：

//pre-translate to force anti-alias
context.translate(0.5, 0.5);

现在我们只画一个十字线：

var cc = 1; //cross-hair size

context.moveTo(p / 2, h / 2 - cc);
context.lineTo(p / 2, h / 2 + cc);
context.moveTo(p / 2 - cc, h / 2);
context.lineTo(p / 2 + cc, h / 2);

context.stroke();

现在，我们首先水平地“裂开”我们的心灵：

//replicate drawn cross-hair = faast.
for (i = 0; i < width - p; i += p) {
    if (i > 0) p *= 2;
    context.drawImage(canvas, 0, 0, p, h, p, 0, p,h);
}

现在我们垂直复制该行：

for(i = 0; i < height; i+=h) {
    if (i > 0) h *= 2;
    context.drawImage(canvas, 0, 0, width, h, 0, h, width, h);
}

请注意，我们不仅要复制一行，而且在绘制一个副本时，我们复制这两个副本，然后跳过四个并复制四个副本，依此类推。

此方法超快，是浏览器（或更确切地说，浏览器使用的系统功能）也复制模式（但带有内部编译代码）的方式。您也可以使用第一个十字准线在屏幕外的画布上设置图案，然后用更快的缺口填充画布。

Updated fiddle

关于javascript - HTML5 Canvas JavaScript十字线网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17478631/