Javascript/jQuery：从画布中删除形状/路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2571899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/jQuery: remove shape/path from canvas
提问by bobsoap
I can't seem to find the function to remove a shape or path from the canvas after it has been created.
在画布创建后，我似乎找不到从画布中删除形状或路径的功能。
So I'm creating a bezier curve between 2 points with
所以我在两点之间创建了一条贝塞尔曲线
beginPath();
bezierCurveTo();
stroke();
closePath();
How can I remove this from the canvas once it's been created? I need to be able to call the remove function via toggle()and blur(). I'm sure something exists for this...
创建后如何将其从画布中删除？我需要能够通过toggle()and调用 remove 函数blur()。我确定有些东西存在于此......
Thanks in advance for any help!
在此先感谢您的帮助！
采纳答案by bobsoap
Thanks for the great input to all of you - it helped me find the solution:
感谢大家的宝贵意见 - 它帮助我找到了解决方案：
context.clearRect(x,y,w,h);
(link)
（链接）
This will clear anything within that rectangle.
这将清除该矩形内的任何内容。
I found the method on the page I found while digging for ILog's answer to save/restore the context, and it's all on there. Thanks again.
我在挖掘 ILog 的答案以保存/恢复上下文时找到的页面上找到了方法，它就在那里。再次感谢。
回答by agegorin
Try this:
尝试这个：
ctx.save();
ctx.globalCompositeOperation = "destination-out";
// drawing here you path second time
ctx.restore();
"The globalCompositeOperation attribute sets how shapes and images are drawn onto the scratch bitmap" specs
“globalCompositeOperation 属性设置如何将形状和图像绘制到临时位图上”规范
How it works you can see here.
你可以在这里看到它是如何工作的。
回答by Drew Noakes
This is an important thing to realise about <canvas>. It's a flattened image made up of pixels. Once something's drawn to it, it's merged into the pixel grid and cannot be differentiated from the other pixels.
这是需要意识到的重要事情<canvas>。它是由像素组成的扁平图像。一旦绘制了某些东西，它就会合并到像素网格中，并且无法与其他像素区分开来。
If you need to be able to separate image elements you could:
如果您需要能够分离图像元素，您可以：
- Overlay
<canvas>elements into a stack of layers - Use
<svg>in which each visual element is distinct from the other elements and may be manipulated independently
- 将
<canvas>元素叠加到一堆图层中 - 使用
<svg>其中每个视觉元素都与其他元素不同并且可以独立操作
You can think of <canvas>as being a single layer in PhotoShop/Gimp/Fireworks, or an MSPaint document.
您可以将其<canvas>视为 PhotoShop/Gimp/Fireworks 中的单个图层，或一个 MSPaint 文档。
You can think of <svg>as a document in Illustrator/InkScape.
您可以将其<svg>视为 Illustrator/InkScape 中的文档。
回答by nxt
You can't remove a path/shape from the canvas. You can draw something else over it or clear the canvas.
您无法从画布中删除路径/形状。您可以在其上绘制其他内容或清除画布。
回答by bcherry
You might try using SVG instead of canvas. There's a fantastic library called Rapha?lthat makes working with SVG a breeze. It works in all browsers too, including IE6.
您可以尝试使用 SVG 而不是画布。有一个很棒的库叫做Rapha?l，它使使用 SVG 变得轻而易举。它也适用于所有浏览器，包括 IE6。
With SVG each shape is its own element that can be moved, transformed, or removed.
对于 SVG，每个形状都是它自己的元素，可以移动、转换或删除。
回答by Coder X
To clear your canvas, use the following code
要清除画布，请使用以下代码
canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);
Always use beginPathmethod when you are starting to draw a new path and closePathmethod after you finished drawing your path.
在开始绘制新路径时始终使用beginPath方法，并在完成路径绘制后使用closePath方法。
NOTE:Paths that are not closed cannot be cleared.
注意：未关闭的路径无法清除。
If your paths are not getting cleared, it must be because of the above reason.
如果您的路径没有被清除，那一定是由于上述原因。
All path MUST begin with beginPath()and end with closePath()
所有路径必须以beginPath()开始并以closePath()结束
Example:
例子：
canvas_context.beginPath();
canvas_context.moveTo(x1,y1);
canvas_context.lineTo(x2,y2);
canvas_context.stroke();
canvas_context.closePath();
The following code also clears your canvas
以下代码也会清除您的画布
canvas_1.width = canvas_1.width;
NOTE:The above statement reinitializes a canvas hence it clears a canvas. Any statement that reinitializes a canvas will clear a canvas.
注意：上面的语句重新初始化一个画布，因此它清除了一个画布。任何重新初始化画布的语句都将清除画布。
回答by Obinwanne Hill
If you're using JQuery:
如果您使用的是 JQuery：
var elem = $("selector");
var canvas = elem.get(0);
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
Replace "selector" with your actual JQuery selector.
将“选择器”替换为您实际的 JQuery 选择器。
回答by ILog
As far as I remember the specification you must call context.save() before drawing, then draw something, and then call context.restore() to return to the previous state.
据我记得的规范你必须在绘制之前调用 context.save() ，然后绘制一些东西，然后调用 context.restore() 返回到之前的状态。
