Javascript/jQuery：从画布中删除形状/路径

Posted 2023-03-24

【中文标题】Javascript/jQuery：从画布中删除形状/路径

【英文标题】：Javascript/jQuery: remove shape/path from canvas

【发布时间】：2011-02-04 00:58:13

【问题描述】：

我似乎找不到在画布创建后从画布中删除形状或路径的功能。

所以我在两点之间创建了一条贝塞尔曲线

beginPath();
bezierCurveTo();
stroke();
closePath();

创建后如何从画布中删除它？我需要能够通过toggle() 和blur() 调用删除函数。我敢肯定这件事是存在的……

提前感谢您的帮助！

【问题讨论】：

我只想提一下，这里和许多答案中使用closePath() 是错误的。它用于通过在路径的起点画一条线来完成路径。在stroke 之后调用它绝对没有任何作用。 ***.com/questions/10807230/…

【参考方案1】：

试试这个：

ctx.save();
ctx.globalCompositeOperation = "destination-out";
// drawing here you path second time
ctx.restore();

“globalCompositeOperation 属性设置形状和图像如何绘制到临时位图上”specs

它的工作原理你可以看到here。

【讨论】：

请为解释提供一些上下文，而不仅仅是链接。根据常见问题解答：“始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。”

【参考方案2】：

对于<canvas>，这是一件很重要的事情。这是一个由像素组成的平面图像。一旦有东西被吸引到它上面，它就会被合并到像素网格中，并且无法与其他像素区分开来。

如果您需要能够分离图像元素，您可以：

将<canvas> 元素叠加到层堆栈中 使用<svg>，其中每个视觉元素都与其他元素不同，并且可以独立操作

您可以将<canvas> 视为 PhotoShop/Gimp/Fireworks 中的单个图层，或 MSPaint 文档。

您可以将<svg> 视为 Illustrator/InkScape 中的文档。

【参考方案3】：

感谢大家的大力投入 - 它帮助我找到了解决方案：

context.clearRect(x,y,w,h);

(link)

这将清除该矩形内的所有内容。

我在挖掘 ILog 的答案以保存/恢复上下文时找到的页面上找到了方法，它都在那里。再次感谢。

【参考方案4】：

您无法从画布中删除路径/形状。您可以在其上绘制其他内容或清除画布。

【参考方案5】：

您可以尝试使用 SVG 而不是画布。有一个很棒的库，叫做Raphaël，它让使用 SVG 变得轻而易举。它也适用于所有浏览器，包括 IE6。

对于 SVG，每个形状都是自己的元素，可以移动、转换或移除。

【讨论】：

这里是回顾性评论 - 如果您绘制很多，SVG 通常会不如画布性能。我目前正在重构一个在 SVG 中进行大量绘图的应用程序以使用画布。

【参考方案6】：

要清除画布，请使用以下代码

    canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

开始绘制新路径时始终使用 beginPath 方法，绘制完路径后始终使用 closePath 方法。

注意： 未关闭的路径无法清除。

如果你的路径没有被清除，那一定是因为上面的原因。

所有路径必须以 beginPath() 开头并以 closePath()

结尾

例子：

     canvas_context.beginPath();
     canvas_context.moveTo(x1,y1);
     canvas_context.lineTo(x2,y2);
     canvas_context.stroke();
     canvas_context.closePath();

下面的代码也会清除你的画布

    canvas_1.width = canvas_1.width;

注意： 上述语句重新初始化了一个画布，因此它清除了一个画布。任何重新初始化画布的语句都会清除画布。

【讨论】：

"所有路径必须以 beginPath() 开头并以 closePath() 结尾" - 错误！见***.com/questions/10807230/…

刚刚在我的 Chrome 中再次测试，你是对的。早在 2011 年，当我在 Chrome 中进行测试时，未关闭的路径从未被清除。无论如何，感谢您的更新。

【参考方案7】：

据我记得的规范，你必须在绘制之前调用 context.save()，然后绘制一些东西，然后调用 context.restore() 以返回到以前的状态。

【讨论】：

感谢您的建议 - 我尝试了这个（不成功），然后发现这个资源 (whatwg.org/specs/web-apps/current-work/multipage/…) 说明：“当前路径和当前位图不是绘图状态的一部分。当前路径是持久的，只能使用 beginPath() 方法重置。当前位图是画布的属性，而不是上下文。不过还是谢谢，非常感谢！

保存/恢复仅对上下文的某些属性进行操作，如果您之后不绘制某些内容，调用它们将永远不会对图像产生可见的影响。 This article 提供更多信息。

【参考方案8】：

如果您使用的是 JQuery：

var elem = $("selector");
var canvas = elem.get(0);
var context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();

将“选择器”替换为您的实际 JQuery 选择器。