使用单个画布，我用javascript绘制了两个不同的图表，是否有任何方法可以在画布中删除最后绘制的图表

using single canvas i have drawn two different diagrams using javascript,is there any way i can remove last drawn diagram in canvas

本文关键字：绘制 是否 删除 最后 任何 方法 布中 我用 javascript 单个画 两个      更新时间：2023-09-26

使用单个画布元素我使用javascript绘制了两个不同的图表，是否有任何方法可以在画布中删除最后绘制的图表。这是我的画布代码<canvas style="width: 100px; height: 100px; border: 1px solid red;" id="cns"></canvas>，我已经使用javascript创建了我的图表，并在按钮单击我试图删除最后绘制的图表var c = document.getElementById("cns"); var d = c.getContext("2d"); d.fillStyle = "#FF0000"; d.fillRect(0, 0, 106, 106); var c1 = document.getElementById("cns"); var d1= c.getContext("2d"); d1.fillStyle = "#00A550"; d1.fillRect(0, 0, 90, 90); $("#clk").click(function () { d1.clearRect(0, 0, 90, 90); });，但它清除了给定尺寸的整个矩形。有没有我可以清除最后绘制的图像

我看到您正在获得对同一画布(id=cns)的多个引用和对其上下文的多个引用。

对于任何单个画布，该画布有且只有1个上下文。一个单一的画布没有多个图层(比如Photoshop)。

因此，d和d1变量实际上包含相同的上下文。这就是为什么清除d或d1会清除画布上相同的区域。

处理画布上的多组图纸(多个图表)的通常方法是:

  • 保存足够的信息来重新创建每个单独的绘图(图表)-通常保存在JS对象中

  • 清空整个画布

  • 使用保存的信息重新绘制当前所需的图。

您可以在插入第二个图之前使用context.save()方法保存到画布。然后，当您想要删除第二个图表时，使用context.restore()，它应该会奏效。

相关文章：