Javascript 尝试刷新特定画布元素

我只是尝试刷新画布元素

我试过这么做

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

}

但它只是不刷新画布元素？如果方便的话，我可以在网站上使用Jquery

下面是canvas元素的HTML

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

---

如果您能帮我找到解决方案，请。

您使用

document.queryselectoral（）

是错误的。由于您选择的是单个目标，因此应使用

document.querySelector（）

。试试这个

function reload(){
    var container = document.querySelector('canvas');
    var content = container.innerHTML;
    container.innerHTML = content;
    console.log("Refreshed");
}

---

使用

document.querySelectorAll（）时出错。

。由于您选择的是单个目标，因此应使用

document.querySelector（）

。试试这个

function reload(){
    var container = document.querySelector('canvas');
    var content = container.innerHTML;
    container.innerHTML = content;
    console.log("Refreshed");
}

---

目前存在一些问题。首先，

[canvas]

应该只是

canvas

。其次，您使用的是

querySelectorAll

，它返回所有画布对象的

NodeList

。因此，或者，使用该选项，然后循环更新所有画布，或者更改为

querySelector

，它只返回一个画布。我建议在这种情况下使用ID

此外，这可能看起来很愚蠢，但您是否正在调用该函数？还是仅仅定义它

这里有

querySelectorAll

和

canvas

：

函数重载（）{
var canvases=document.querySelectorAll（'canvas'）；
为了（让画布成为画布）{
var ctx=canvas.getContext（“2d”）；
var content=ctx.getImageData（0，0，canvas.width，canvas.height）；
ctx.putImageData（ctx，0,0）
console.log（“刷新”）；//监视控制台。
}
}

---

目前存在一些问题。首先，

[canvas]

应该只是

canvas

。其次，您使用的是

querySelectorAll

，它返回所有画布对象的

NodeList

。因此，或者，使用该选项，然后循环更新所有画布，或者更改为

querySelector

，它只返回一个画布。我建议在这种情况下使用ID

此外，这可能看起来很愚蠢，但您是否正在调用该函数？还是仅仅定义它

这里有

querySelectorAll

和

canvas

：

函数重载（）{
var canvases=document.querySelectorAll（'canvas'）；
为了（让画布成为画布）{
var ctx=canvas.getContext（“2d”）；
var content=ctx.getImageData（0，0，canvas.width，canvas.height）；
ctx.putImageData（ctx，0,0）
console.log（“刷新”）；//监视控制台。
}
}

---

您应该使用

querySelector

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

或

querySelectorAll

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

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

画布

：

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

如果更改

canvas

的内部HTML会刷新它，那么这是一种黑客方法，只有在HTML实际更改时，它才应该根据我的意见工作。相反，最好将

画布的内容存储在某个地方，然后清除：

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

然后再次绘制。
您应该使用
查询选择器获得
容器

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

或
querySelectorAll

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

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

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

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

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

然后再画一次。
还是不行。也许你可以看看URL的HTML？William，在发布解决方案之前自己运行/测试代码是值得的。你是对的，querySelectorAll无法工作，因为它们当时没有循环，但另一个问题是选择器也在使用中。@KeeghanMcGarry对不起，这是我的错。谢谢你的建议，还是不行。也许你可以看看URL的HTML？William，在发布解决方案之前自己运行/测试代码是值得的。你是对的，querySelectorAll无法工作，因为它们当时没有循环，但另一个问题是选择器也在使用中。@KeeghanMcGarry对不起，这是我的错。谢谢你的建议。：/仍然有问题。所以我的完整脚本基本上发送了一个POST请求。这将在画布上绘制一些笔划。在刷新页面之前，我看不到它。因此，当我使用您的脚本时，它只记录“刷新”，但不会重新加载画布。你能看一下URL的HTML吗？因为我看到多个画布元素。我很确定。@Sparkestheunicorn请尝试新代码。不是更新innerHTML，而是实际捕获图像数据并重新绘制它。：/仍然存在问题。所以我的完整脚本基本上发送了一个POST请求。这将在画布上绘制一些笔划。在刷新页面之前，我看不到它。因此，当我使用您的脚本时，它只记录“刷新”，但不会重新加载画布。你能看一下URL的HTML吗？因为我看到多个画布元素。我很确定。@Sparkestheunicorn请尝试新代码。不是更新innerHTML，而是实际捕获图像数据并重新绘制。