0
20x20px 사각형을 가진 브라우저 창의 크기를 그리드로 만들려고합니다. 내 첫 번째 아이디어는 다음 코드를 사용하여 테이블을 만드는 것이었지만 IE8 (모든 모드에서)은 공백이 아닌 내용이 없으면 셀을 렌더링하지 않습니다. this에 따르면 이 있지만 내 테스트에서 테이블이 원래 DOM에있는 경우에만 작동하며 자바 스크립트에서는 작동하지 않습니다. 내가 십자가를 작동 그것을 가지고 .. 테이블이 의도되지 않기 때문에 벡터 드로잉은 원칙적으로 더 적절한 해결책이 될 것이라고 생각 -프로그래밍 방식으로 20x20 픽셀 셀 그리드 배경을 만드는 방법은 무엇입니까?
dojo.ready(function(){
var grid = dojo.byId("grid");
var tr;
for(var i=0; i<20; i++) {
tr = dojo.create("tr", null, grid);
for(var j=0; j<20; j++) {
var td =dojo.create("td", {innerHTML: " "}, tr);
dojo.style(td, {border: "solid", height: "20px", width: "20px"});
}
}
});
...
<table id="grid" style="border-collapse: collapse;"></table>
는 접근 방식을 포기 후, 나는 구글 폐쇄의 벡터 그래픽 라이브러리를 사용하기로 결정 브라우저를 사용하지만 괜찮은 크기의 그리드 (1000x1000)에서는로드 시간과 메모리 사용량이 터무니 없습니다. 나는 그것이이 사용하도록 설계되지 않았 가정 해 봅시다 중 하나
var graphics = goog.graphics.createGraphics(800, 800);
var path, stroke = new goog.graphics.Stroke(1, "gray");
for(var x=0; x<65; x++) {
for(var y=0; y<65; y++) {
path = new goog.graphics.Path();
path.moveTo(0, y*20);
path.lineTo(800, y*20);
graphics.drawPath(path, stroke);
path = new goog.graphics.Path();
path.moveTo(x*20, 0);
path.lineTo(x*20, 800);
graphics.drawPath(path, stroke);
}
}
graphics.render(document.byId("grid"));
...
은 아마 실용적인 솔루션은 20x20px 이미지를 생성하는 것입니다 반복적으로 그입니까?