[英]HTML5 Canvas - For loop to place elements in grid
我正在用HTML5 canvas構建一個簡單的關卡放置腳本,而實際上將每個元素放下都遇到了麻煩。 我編寫了一個用於創建網格的for循環,然后嘗試創建一個新的循環,該循環遍歷“級別”數組中的每個語句以設置每個圖像的位置。 我以前對Canvas並沒有做很多事情; 因此,我不確定在放置這些圖片方面做錯了什么; 我已經在jQuery中編寫了與之非常相似的東西,效果很好-實際上,我復制並粘貼了開始的代碼,但是在Canvas中似乎不起作用。 任何幫助,將不勝感激!
這是代碼片段; 原諒過多的評論,這只是我在無法理解為什么某些功能無效時要做的一件事。 就像內嵌的橡皮鴨。
var $levelArray = [
[0, 0, 0, "blue", "blue"],
[0, "gray", 0, 0, 0],
["blue", "blue", "green", 0, "blue"],
["blue", 0, "yellow", 0, 0],
[0, 0, 0, "gray", 0],
["red", 0, 0, 0, 0]];
var border = 5, // set grid details
spaceWidth = 80,
spaceAmount = 5;
// create a tiled image
function makeTile(imageUrl, horizontalPosition, verticalPosition) {
var tile = new Image();
tile.onload = function() {
context.drawImage(tile, horizontalPosition, verticalPosition);
}
tile.src = imageUrl;
}
// place the image tiles on the board
for (var i=0; i < ($levelArray.length - 1); i++) {
var row = $levelArray[i]; // set each row's iterative position
var rowHeight = 5;
for (var j=0; j < row[j].length; j++) {
var rowPosition = 5; // set the left margin of each element
if (row[j] == 0) {
rowPosition += (spaceWidth + 5); // if an element does not exist, jump forwards to the next space
} else {
//if one DOES exist, place an image in this space
makeTile("http://lorempixel.com/80/80", rowPosition, rowHeight);
rowPosition += (spaceWidth + 5); // then move to the next space
};
};
rowHeight += (spaceWidth + 5); // once a row is complete, drop to the next row's positions
};
我在一個codepen中有這個: http ://codepen.io/sarsparillo/pen/vNrWQG
我不確定為什么為什么一次只加載一張圖像並將其放在網格的0,0空間中; 在jQuery中使用非常相似的代碼(當前代碼,到處都是,有點不干凈,在這里-http://codepen.io/sarsparillo/pen/GpdjYY )將元素放在正確的位置就可以了。
而且,當我在for循環中添加console.log語句時,老實說,我無法弄清楚從哪里獲取數據。 就像,一次迭代給我“綠色綠色黃色”作為行[j]中的項目,另一次給我“藍色灰色藍色”-Canvas在遍歷數組時做的事情絕對奇怪嗎? 我看不到它怎么可能,因為這只是Javascript,但是...?
有誰知道為什么會這樣,或者有什么技巧可以解決這個問題? 從理論上講,它應該只是將空格寬度+邊距寬度添加到每個“正方形”的起點,因此我不確定為什么……不是。
jsFiddle: https ://jsfiddle.net/CanvasCode/4gr9apqm/
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var border = 5, // set grid details
spaceWidth = 80,
spaceAmount = 5;
var $levelArray = [
["blue", 0, 0, "blue", "blue"],
[0, "gray", 0, 0, 0],
["blue", "blue", "green", 0, "blue"],
["blue", 0, "yellow", 0, 0],
[0, 0, 0, "gray", 0],
["red", 0, 0, 0, 0]
];
canvas.width = (spaceWidth * spaceAmount) + (5 * spaceAmount) + 5; // and here's the canvas size
canvas.height = (spaceWidth * spaceAmount) + (5 * spaceAmount) + 5;
// make a rounded corner square; using a sizing hack to make sure that strokes don't effect the full size of the item
function square(originX, originY, size, corner, fill) {
var startFromX = originX + (corner / 2);
var startFromY = originY + (corner / 2);
var extentsX = startFromX + (size - corner);
var extentsY = startFromY + (size - corner);
context.lineJoin = "round";
context.lineWidth = corner;
context.fillStyle = "#513574";
context.strokeStyle = fill;
context.beginPath();
context.moveTo(startFromX, startFromY);
context.lineTo(startFromX, extentsY);
context.lineTo(extentsX, extentsY);
context.lineTo(extentsX, startFromY);
context.closePath();
context.stroke();
context.fill();
}
// build a grid of said squares
function squareGrid(spacing, size, corner, color, amount) {
for (var x = 0; x < amount; x++) {
// build rows
for (var y = 0; y < amount; y++) {
// build column spacing in each row
square(5 + (size * x) + (spacing * x), 5 + (size * y) + (spacing * y), size, corner, color);
// build each square
}
};
};
// actually parse the arguments for said square
squareGrid(border, spaceWidth, (border * 2), "#f13574", spaceAmount);
// create a tiled image
function makeTile(tile, horizontalPosition, verticalPosition) {
switch (tile) {
case "blue":
context.fillStyle = "#00F";
context.fillRect(horizontalPosition, verticalPosition, 80, 80);
break;
case "green":
context.fillStyle = "#0F0";
context.fillRect(horizontalPosition, verticalPosition, 80, 80);
break;
case "red":
context.fillStyle = "#F00";
context.fillRect(horizontalPosition, verticalPosition, 80, 80);
break;
case "gray":
context.fillStyle = "#999";
context.fillRect(horizontalPosition, verticalPosition, 80, 80);
break;
case "yellow":
context.fillStyle = "#FF0";
context.fillRect(horizontalPosition, verticalPosition, 80, 80);
break;
}
};
var gapHeight = 5;
var gapWidth = 5;
for (var y = 0; y < $levelArray.length - 1; y++) {
var row = $levelArray[y];
for (var x = 0; x < row.length; x++) {
var newXPos = (gapWidth * (x + 1)) + (80 * x);
var newYPos = (gapHeight * (y + 1)) + (80 * y)
makeTile($levelArray[y][x], newXPos, newYPos);
}
}
我所做的更改基本上就是您訪問2D數組和位置計算的方式。 基本上,首先要訪問的是Y位置,然后從Y位置查看該行上的所有塊。 因此,我們首先找到“以我為例” blue, 0, 0, blue, blue
。 因此所有這些元素的y位置都將為0,然后從0、80、160等開始。但是,由於您想要在塊之間添加一個間隙,因此您還必須將間隙乘以x和y值。 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.