1

クロスヘア グリッド (10px ごと) を作成したかった。私はそれに多くの問題を抱えていました。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();
4

2 に答える 2

2

いつでも 2 つのループに減らすことができ、それにも 2 つの方法があります。しかし、前: markE に同意します。あなたのコードはそのままで問題ありません。

ここでの私のバージョンは、ループを減らし、その速度を最適化する 1 つの方法を示すことです。

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

ここで、十字線を 1 つだけ描画します。

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);
}

1 つの線をコピーするだけではないことに注意してください。1 つのレプリケートを描画したら、それら 2 つを複製し、次に 4 つをスキップして 4 つをコピーします。

この方法は超高速で、ブラウザー (またはブラウザーが使用するシステム関数) がパターンを複製する方法でもあります (ただし、内部でコンパイルされたコードを使用します)。また、最初の十字線を使用してオフスクリーン キャンバスにパターンを設定し、それでキャンバスを塗りつぶすこともできます。

Updated fiddle

于 2013-07-04T23:03:38.483 に答える