HTML 画布不更新答案

【问题标题】：HTML Canvas doesn't updateHTML 画布不更新
【发布时间】：2017-09-07 19:51:53
【问题描述】：

当我调用 move() 时，“y”变量已更改，但框仍呈现在同一位置。

var c = document.getElementById("can");  //my canvas id is "can"  
var pen = c.getContext("2d");
var y = 200;
setInterval(render(y), 1000/30); //update 30 times per second

function move(dir){
    y=y+dir;
}

function render(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();
}

【问题讨论】：

您需要将 'render' 作为函数引用传递，而不是在创建区间时调用它。

标签： javascript html canvas 2d-games

【解决方案1】：

您必须在 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】：

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

【讨论】：

它被使用了，我只是没有在此处包含代码，因为我认为没有必要。我用按钮来改变它，并检查了 var 本身是否真的在改变。