Question

这是我的代码。当我更改var y时，框不会移动...画布会在第一次渲染它但看起来它没有更新......

ArrayIndexOutOfBoundsException

Answer 1

因为你的函数move（）从未使用过。如果改变它的高度或宽度，它可以更新：）

Answer 2

您必须在setInterval中调用move和render。

var c = document.getElementById("can"); //my canvas id is "can"  
var pen = c.getContext("2d");
var y = 0;
var dir = 20;

function dirValue(val) {
  dir = val;
}
setInterval(function() {
  move(dir);
  render(y);
}, 1000); //update 30 times per second
function move(dir) {
  return y = y + dir;
}

function render(height) {
  //console.log(height);
  pen.beginPath();
  pen.clearRect(0, 0, 888, 500);
  pen.beginPath();
  pen.rect(30, height, 50, 50); //Draw the player
  pen.fillStyle = "green";
  pen.fill();
}

<button type='button' onclick='dirValue(20)'>Down</button>
<button type='button' onclick='dirValue(-20)'>UP</button>
<button type='button' onclick='dirValue(0)'>Stop</button>
<canvas id="can" width="1000" height="1000"></canvas>

为什么我的画布没有更新？

2 个答案: