javascript - 试图刷新特定的 Canvas 元素

Question

我只是想刷新 Canvas 元素。

我试过了

function reload(){
var container = document.querySelectorAll('[canvas]');
var content = container.innerHTML;
container.innerHTML= content;
console.log("Refreshed"); //Watches console.

但它根本不刷新 canvas 元素？如果更容易的话，我可以在网站上使用 Jquery。

这是 Canvas 元素的 HTML。

<canvas width="800" height="500" style="position: absolute; top: 39px; left: 136px; background-color: transparent; z-index: 10;"></canvas>

如果你能帮我找到解决办法，请。

Answer 1

您应该使用querySelector获取容器

var container = document.querySelector('canvas');

或querySelectorAll

var container = document.querySelectorAll('canvas')[0];

现在，您尝试通过将其内部 HTML 更改为以前已知的 HTML 值来刷新 canvas:

var content = container.innerHTML;
container.innerHTML= content;
console.log("Refreshed"); //Watches console.

如果更改 canvas 的内部 HTML 会刷新它，那么这是一种 hacky 方法，并且只有在 HTML 实际更改时，它才应该根据我的意见工作。相反，最好将 canvas 的内容存储在某处，然后清除它:

ctx.clearRect(0, 0, canvas.width, canvas.height);

再画一遍。