1
지금 당장 저는 HTML5를 엉망으로 만들고 JavaScript를 사용하여 간단한 2D 타일 맵을 만듭니다. 그것은 잘 가고 있지만 나는 하나의 거대한 기능 안에 모든 것을 넣을 수 없다는 것을 깨달았습니다.JavaScript - 캔버스를 전역 변수로 변경
canvas
및 context
은 다른 기능으로 액세스 할 수있는 변수로 전역 변수를 만들려고합니다. 지금은 "로드 중"에서만 사용할 수 있습니다 ... 어떻게 만들 수 있습니까? 나는 canvas
및 context
변수를 만들 넣을 때 ... 나는 오류를 여기
Uncaught TypeError: Cannot call method 'getContext' of null
내 SSCCE됩니다 얻을 :
// HTML5 JS Tile Example
// Set return 2D array of map
function loadMap(map) {
if (map == 1) {
return [
[67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]];
}
}
// On load...
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
var tiles = [];
var board = loadMap(1);
canvas.width = 512;
canvas.height = 352;
// 2. SET UP THE MAP TILES
for (x = 0; x <= 520; x++) {
imageObj = new Image(); // new instance for each image
imageObj.src = "line_tile/t" + x + ".png";
tiles.push(imageObj);
}
var theX;
var theY;
// 3. DRAW MAP BY ROWS AND COLS
for (x = 0; x <= 10; x++) {
for (y = 0; y <= 15; y++) {
theX = x * 32;
theY = y * 32;
context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
}
}
};
온라인 예 : http://mystikrpg.com/html5/
그거 알아? 나는 이것을 알았으므로 잠을 자지 못했지만, 다시는 단지 상기시켜야 할 필요가있었습니다 ... 감사합니다. bardiir. – nn2