putImageData我在实际放置图像数据时遇到了一些麻烦。
我检查thegame.pbuf了有效数据，它似乎是有效的。在 Opera 和 Firefox 中测试。
有人知道为什么它不显示颜色吗？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#drawingSurface {
width:500px;
height:500px;
border: 5px solid black;
}
</style>
</head>
<body>
<canvas id="drawingSurface">2000 and late</canvas>
<script type="text/javascript">
var thegame = {
init: function (width, height) {
var canvas = document.getElementById("drawingSurface");
thegame.ctx = canvas.getContext("2d");
thegame.width = width;
thegame.height = height;
thegame.pbuf = thegame.ctx.createImageData(width, height);
},
drawBanner: function (text) {
thegame.ctx.font = "bold 64px Verdana";
thegame.ctx.fillStyle = "#302226";
thegame.ctx.textAlign = "center";
thegame.ctx.fillText(
text,
thegame.width / 2, thegame.height * (1 / 4)
);
},
update: function () {
for (var j = 0; j < thegame.height; j++) {
for (var i = 0; i < thegame.width; i++) {
var loc = 4 * (j * thegame.width + i);
thegame.pbuf[loc + 0] = Math.random() * 256 | 0;
thegame.pbuf[loc + 1] = Math.random() * 256 | 0;
thegame.pbuf[loc + 2] = Math.random() * 256 | 0;
thegame.pbuf[loc + 3] = Math.random() * 256 | 0;
thegame.pbuf[loc + 0] = 255;
}
}
},
draw: function () {
thegame.ctx.putImageData(thegame.pbuf, 0, 0);
this.drawBanner("Random Colors");
}
};
thegame.init(500, 500);
//Rendering
var interval = 1000 / 60;
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (
var x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x
) {
window.requestAnimationFrame = window[vendors[x]
+ 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]
+ 'CancelAnimationFrame'] || window[vendors[x]
+ 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (
callback,
element
) {
var currTime = new Date().getTime();
var timeToCall = Math.max(
0,
16 - (currTime - lastTime)
);
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());
(function gameloop() {
setTimeout(function () {
window.requestAnimationFrame(gameloop);
thegame.draw();
thegame.update();
}, interval);
})();
</script>
</body>
</html>