Question

所以我开始添加canavs，css，javascript的基础知识。图像应该在HTML或JavaScript中吗？接下来，我在画布上添加了背景颜色。然后我在javascript中添加canvas属性和keyCodes。我用window.onload获取了图像。之后，我注意到画布正在移动但不是图像。

＆＃13;

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];

window.addEventListener("keydown", function(e){
	keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
	delete keys[e.keyCode];
}, false);

function game(){
	window.onload;
	update();
	render();
}

function update(){
	if(keys[38]) img.y--;
	if(keys[40]) img.y++;
	if(keys[37]) img.x--;
	if(keys[39]) img.x++;
}
function render(){
	ctx.fillRect(img.x, img.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    var ctx=c.getContext("2d");
    var img=document.getElementById("chio");
    ctx.drawImage(img,10,10);
};

setInterval(function(){
    game();
}, 1000/30)


// > note: window.onload shows the images

＆＃13;

#app{
background-color:#33ff00
}

＆＃13;

<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<canvas id="app" width=300 height=640></canvas>
<img id="chio" src="chio.png"/>
<script src="app.js"></script>
</body>
</html>

＆＃13;

我此时迷路了，请帮助我

Answer 1

您提供的代码存在许多问题，最有问题的是您在文档加载之前可能尝试访问各个位置的DOM元素。这应该全部附加到您已经使用的window.onload事件。

另一个问题是你在本地声明变量并初始化它们，但是在代码的其他地方你将它们视为全局变量并尝试访问它们 - 产生更多错误。应将这些变量移至全局范围。

您还尝试修改原始<img>元素上的某些x / y属性以跟踪其在画布上的位置 - 这不起作用。我将位置跟踪移动到具有x / y属性的JavaScript对象中。

最后，您没有调用正确的代码将图像绘制到render()函数中的画布上。我建议清除画布并用drawImage()重新绘制图像。

将所有这些建议付诸实践，您的JavaScript将成为：

// Global variables for later use
var keys = [];
var canvas;
var ctx;
var img;

// Object to track image position on canvas
var imgPos = {
    x: 0,
    y: 0
}

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

function game(){
    window.onload;
    update();
    render();
}

function update(){
    if(keys[38]) imgPos.y--;
    if(keys[40]) imgPos.y++;
    if(keys[37]) imgPos.x--;
    if(keys[39]) imgPos.x++;
}
function render(){
    // Clear canvas and redraw image at new location
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,imgPos.x,imgPos.y);
}

window.onload = function() {
    // Initialize canvas
    canvas = document.getElementById("app");
    canvas.width  = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    canvas.style.width = canvas.width + "px";
    canvas.style.height = canvas.height + "px";

    // Draw image to canvas
    ctx=canvas.getContext("2d");
    img=document.getElementById("chio");
    ctx.drawImage(img,imgPos.x,imgPos.y);

    // Start game loop
    setInterval(function(){
        game();
    }, 1000/30);
};

这是一个JSFiddle来演示。无论我做了哪些重大更改，我都会对代码进行评论，以帮助您更好地遵循它。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

我在“app.js”中做了一些修正，但我不知道你究竟想要什么。如果你想移动图像，那么这是一种方式。

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];
var ctx;
var img;
var position = {x:0,y:0};
window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    keys[e.keyCode] = false;
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) position.y--;
    if(keys[40]) position.y++;
    if(keys[37]) position.x--;
    if(keys[39]) position.x++;
}
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,position.x,position.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    ctx=c.getContext("2d");
    img=document.getElementById("chio");
};

setInterval(function(){
    game();
}, 1000/30);


// > note: window.onload shows the images

画布使用键盘输入移动但图像不移动

2 个答案: