[英]HTML5 Canvas JavaScript Crosshair Grid
我想做一個十字准線網格(每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();
你總是可以將它減少到兩個循環,並且有兩種方法。 但之前:我同意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);
}
請注意,我們不只是復制一行,但是當我們繪制一個復制時,我們復制這兩個,然后我們跳過四個並復制四個等。
這種方法超快,瀏覽器(或瀏覽器使用的系統功能)也可以復制模式(但內部編譯代碼)。 您也可以使用第一個十字准線在屏幕外的畫布上設置圖案,並在畫布上填充可能更快的凹槽。
有了Ken的幫助。 工作jsFiddle
var canvas = document.getElementById('grid');
var context = canvas.getContext('2d');
var width = canvas.width,
height = canvas.height;
context.moveTo(10.5, 10 - 1);
context.lineTo(10.5, 10 + 2);
context.moveTo(10.5 -1, 10.5);
context.lineTo(10.5 +2, 10.5);
context.stroke();
var h=10,
p=10;
for (i = 0; i < width; i += p) {
p *= 2;
context.drawImage(canvas, p, 0);
}
for(i = 0; i < height; i+=h) {
h *= 2;
context.drawImage(canvas, 0, h);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.