Question

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

所以我用

在2点之间创建了一条贝塞尔曲线

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

如何在画布创建后将其从画布中删除？我需要能够通过toggle()和blur()调用删除功能。我确定存在这样的事情......

提前感谢您的帮助！

Answer 1

试试这个：

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

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

如何运作，您可以看到here。

Answer 2

关于<canvas>，这是一个重要的事情。这是一个由像素组成的扁平图像。一旦绘制了某些东西，它就会合并到像素网格中，无法与其他像素区分开来。

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

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

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

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

Answer 3

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

Answer 4

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

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

（link）

这将清除该矩形内的任何内容。

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

Answer 5

您可以尝试使用SVG而不是画布。有一个名为Raphaël的神奇图书馆，使得与SVG合作变得轻而易举。它也适用于所有浏览器，包括IE6。

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

Answer 6

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

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

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

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

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

所有路径必须以 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;

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

Answer 7

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

Answer 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();

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

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

8 个答案: