![](/img/trans.png)
[英]iPhone does not allow Javascript or Jquery functionality in an HTML page when loaded in Locally (works fine when loaded from hosted site)
[英]Why does my HTML5 page crash when loaded from web when it doesn't locally
对HTML5完全陌生,我开始使用画布。 这是我的第一个画布页面。
当您在本地运行它(即file:///)时,它可以完美运行,但是当我将文件上传到任何一个虚拟主机时,页面在加载时会卡住。 加载图标正在旋转,并且出现了标题,但是页面主体从未被检索到,因此很明显它卡在了头部的某个地方。
下面是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>1st Attempt - 2D Canvas</title>
<meta charset='utf-8'>
<script type="text/javascript">
window.addEventListener('load', function () {
canvas = document.getElementById('gamecanvas');
context = canvas.getContext('2d');
if(context){
// Load images and stuff
sprites = loadResources();
// Create player object
player = {"pos": {"x": 0, "y": 0}, "blockunder": sprites.grass};
// Draw a grid with a texture and stroke using my own awesome function
drawGrid(sprites.grass, false);
drawPlayer(0, 0);
// Define controls
window.onkeydown = function(event){
switch(event.which){
case 37: // ArrowLeft
movePlayer("left");
break;
case 38: // ArrowUp
movePlayer("up");
break;
case 39: // ArrowRight
movePlayer("right");
break;
case 40: // ArrowDown
movePlayer("down");
break;
}
}
}
}, false);
function loadResources(){
// Sprites
var grass = new Image();
grass.src = 'gfx/grass.png';
var player = new Image();
player.src = 'gfx/player.png';
console.log("Loaded all resources");
return {"player": player, "grass": grass};
}
function drawGrid(bgImage, drawStroke){
cellWidth = bgImage.width;
cellHeight = bgImage.height;
console.log("Texture dimensions are " + cellWidth + "x" + cellHeight + " pixels");
canvasWidth = context.canvas.getAttribute("width");
canvasHeight = context.canvas.getAttribute("height");
var curX = 0;
var curY = 0;
context.strokeStyle = '#444';
context.lineWidth = 1;
while(curX < canvasWidth){
while(curY < canvasHeight){
context.drawImage(bgImage, curX, curY);
if(drawStroke){
context.strokeRect(curX, curY, curX + cellWidth, curY + cellHeight);
}
curY += cellHeight;
}
curY = 0;
curX += cellWidth;
}
}
function movePlayer(direction){
switch(direction){
case "left":
drawPlayer(-cellWidth, 0);
break;
case "up":
drawPlayer(0, -cellWidth);
break;
case "right":
drawPlayer(cellWidth, 0);
break;
case "down":
drawPlayer(0, cellWidth);
break;
}
}
function drawPlayer(addX, addY){
addX = typeof addX !== 'undefined' ? addX : 0;
addY = typeof addY !== 'undefined' ? addY : 0;
context.drawImage(player.blockunder, player.pos.x, player.pos.y);
if(player.pos.x + addX >= 0 && player.pos.x + addX < canvasWidth){
player.pos.x += addX;
}
if(player.pos.y + addY >= 0 && player.pos.y + addY < canvasHeight){
player.pos.y += addY;
}
context.drawImage(sprites.player, player.pos.x, player.pos.y);
}
</script>
</head>
<body style="text-align: center;">
<h1>Run Steve!</h1>
<canvas id="gamecanvas" height="608" width="800">Canvas is not supported.</canvas>
</body>
</html>
图像路径是否相对于当前页面? 你尝试过类似的东西吗
grass.src = '~/gfx/grass.png';
例如,如果cellWidth为零,则
curX += cellWidth;
不会让您走出困境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.