【发布时间】：2012-01-07 09:47:38
【问题描述】：
我正在制作一个将 Canvas 元素附加到 DIV 的小游戏框架，但每当我将元素添加到 DIV 时，最后一个元素都会被删除。
这是我的html：
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset=utf-8 />
<title>Gimmick | Just another JS Game Framework</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<!-- Scripts -->
<!-- Framework -->
<script type="text/javascript" src="js/gimmick/preloader.js"></script>
<script type="text/javascript" src="js/gimmick/graphicsentity.js"></script>
<script type="text/javascript" src="js/gimmick/entitycontainer.js"></script>
<script type="text/javascript" src="js/gimmick/staticsprite.js"></script>
<!-- Game -->
<!-- Main thread -->
<script type="text/javascript" src="js/main.js"></script> <!-- Main Thread -->
</head>
<body>
<div id="game">
<!-- Game Content is auto-generated by code -->
</div><!-- Game -->
</body>
主要代码：
document.addEventListener("DOMContentLoaded", function() {
// Create new Stage
//var mainStage = new EntityContainer("game");
// Create some dummy DisplayObjects
var blocks = [];
var game = document.getElementById("game");
for(var i = 0; i < 5; i++) {
var block = new StaticSprite({ x: 0, y: 32 * i });
game.appendChild(block.DOMElement)
}
/*window.setInterval(function() {
for(var block in blocks) {
blocks[block].x+= 1;
blocks[block].y+= 1;
}
}, 12); */
}, false);
还有课程：
/**
* Class for drawing static sprites, like trees and blocks
*/
function StaticSprite(args) {
// Private Fields
var texture = new Image();
var graphics = this.graphics;
// Events
function textureLoaded() {
// Draw image
graphics.drawImage(texture, 0, 0, texture.width, texture.height);
// Destroy unused vars
delete graphics;
}
// Constructor
// Add event listeners
texture.addEventListener("load", textureLoaded, false);
// Load texture
texture.src = "img/assets/wall1.png";
if(args != undefined) {
// Set local fields
this.x = args.x || this.x;
this.y = args.y || this.y;
this.z = args.z || this.z;
this.width = args.width || this.width;
this.height = args.height || this.height;
}
this.width = 32;
this.height = 32;
}
// Inherit from GraphicsEntity
StaticSprite.prototype = new GraphicsEntity();
其他类：
/**
* Class for presentation of graphical objects.
*/
function GraphicsEntity(args) {
// Private Fields
var x = 0; // The X-position of the GraphicsEntity relative to it's parent container
var y = 0; // The Y-position of the GraphicsEntity relative to it's parent container
var z = 0; // The Z-position of the GraphicsEntity relative to it's parent container
var width = 0; // The width of the GraphicsEntity
var height = 0; // The height of the GraphicsEntity
// Public Fields
this.DOMElement = null; // Reference to the corresponding HTML Element
this.graphics = null; // The 2D context for rendering 2D onto the element.
this.name = ""; // The name of the GraphicsEntity
// Properties
// The Alpha or transparency value of the GraphicsEntity, 1 is completely opaque, 0 is completely transparent.
Object.defineProperty(this, "alpha", {
get: function() { return parseFloat(this.DOMElement.style.opacity); },
set: function(value) { this.DOMElement.style.opacity = value; }
});
// The height of the GraphicsEntity
Object.defineProperty(this, "height", {
get: function() { return height; },
set: function(value) {
height = value; // Set internal width
this.DOMElement.setAttribute("height", height); // Set DOMElement width
}
});
// The width of the GraphicsEntity
Object.defineProperty(this, "width", {
get: function() { return width; },
set: function(value) {
width = value; // Set internal width
this.DOMElement.setAttribute("width", width); // Set DOMElement width
}
});
// The X-position of the GraphicsEntity relative to it's parent container
Object.defineProperty(this, "x", {
get: function() { return x; },
set: function(value) {
x = value; // Set internal X-axis
this.DOMElement.style.left = Math.ceil(x) + "px"; // Set DOMElement X-axis
}
});
// The Y-position of the GraphicsEntity relative to it's parent container
Object.defineProperty(this, "y", {
get: function() { return y; },
set: function(value) {
y = value; // Set internal Y-axis
this.DOMElement.style.top = Math.ceil(y) + "px"; // Set DOMElement Y-axis
}
});
// The Z-position of the GraphicsEntity relative to it's parent container
Object.defineProperty(this, "z", {
get: function() { return z; },
set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }
});
// Constructor
// Get constructor values of use default
if(args) {
x = args.x || x;
y = args.y || y;
z = args.z || z;
width = args.width || width;
height = args.height || height;
}
// Create a new canvas element
this.DOMElement = document.createElement('canvas');
// Set postion
this.DOMElement.style.position = "absolute"; // Positioning style
this.DOMElement.style.left = x + "px"; // X-axis
this.DOMElement.style.top = y + "px"; // Y-axis
this.DOMElement.style.zIndex = z; // Z-Axis
this.DOMElement.width = width;
this.DOMElement.height = height;
// Set opacity/alpha
this.DOMElement.style.opacity = 1;
// Get 2d canvas context
this.graphics = this.DOMElement.getContext('2d');
}
【问题讨论】：
-
如果您希望有人回答，请减少问题中的代码量，尽量给出重现问题所需的最少代码。
-
你确定 div 不在前一个下面（你使用绝对位置来设置画布的位置）？
-
代码复现有点困难，而且getter和setter占用了大部分空间。
-
它们在 z-index 中没有对齐，但它们甚至没有出现在 DOM 中。
标签： javascript html dom canvas appendchild