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

我似乎无法找到在创建后从画布中删除形状或路径的功能。Javascript/jQuery：从画布中删除形状/路径

所以我创建与

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

2点之间的贝塞尔曲线如何从画布一旦它被创建删除此？我需要能够通过toggle()和blur()调用删除功能。我确信这件事存在...

在此先感谢您的帮助！

来源

2010-04-03 bobsoap

我只想提及在这里和许多答案中使用'closePath（）'是错误的。它用于通过在路径的起始处绘制一条线来完成路径。在'stroke'后调用它确实没有任何意义。** http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of- ctx-closepath – 2013-07-31 04:16:20

感谢伟大的输入到所有的你 - 它帮我找到了解决方案：

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

（link）

这将清除矩形内的任何东西。

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

来源

2010-04-03 19:18:46 bobsoap

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

来源

2010-04-03 17:25:53 ILog

感谢您的建议 - 我试过了（不成功），然后找到了这个资源（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html ＃画布状态）说明： “当前路径和当前位图不是绘图状态的一部分，当前路径是持久性的，只能使用beginPath（）方法重置，当前位图是画布的属性，而不是上下文。“ 尽管如此，非常感谢！ – bobsoap 2010-04-03 18:45:06

保存/恢复仅对上下文的某些属性进行操作，如果以后未绘制任何内容，调用它们将永远不会在图像上产生可见效果。 [本文]（http://www.tutorialspoint.com/html5/canvas_states.htm）提供了更多信息。 – 2012-10-15 13:32:12

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

来源

2010-04-03 17:33:03 nxt

您可以尝试使用SVG而不是画布。有一个叫做Raphaël的精彩图书馆，它使SVG的工作变得轻而易举。它也适用于所有浏览器，包括IE6。

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

来源

2010-04-03 18:40:24 bcherry

这看起来太棒了，我已经在研究它。谢谢！ – bobsoap 2010-04-03 19:19:33

这里有一个回顾评论 - 如果你画的很多，SVG通常不会比画布更高效。我目前正在重构一个在SVG中使用canvas进行大量绘制的应用程序。 – 2014-06-22 14:35:19

如果你正在使用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选择。

来源

2011-03-29 11:49:33

要清除你的画布，使用下面的代码

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;

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

来源

2011-07-23 14:07:42

“所有路径必须以beginPath（）开始并以closePath（）结尾” - 错误！请参阅http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath – 2013-07-31 04:18:39

只需在我的Chrome和您中再次进行测试是对的。早在2011年，当我在Chrome中进行测试时，未关闭的路径从未被清除。无论如何，感谢您的更新。 – 2013-07-31 08:38:47

这是实现约<canvas>重要的事情。这是一个由像素组成的平坦图像。一旦绘制了它，它就会合并到像素网格中，并且不能与其他像素区分开来。

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

叠加<canvas>元素注入层的叠层
使用<svg>其中每个视觉元素是从其他元件不同的，并且可以是独立操作

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

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

来源

2012-10-15 13:38:43

试试这个：

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

“掌握globalCompositeOperation属性设置如何形状和图像绘制到划痕位图” specs

它是如何运作的，你可以看到here。

来源

2012-12-04 00:24:30 agegorin

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

回答

相关问题