如何从画布中添加和删除（多个）图像？
我是画布（HTML5）新手，我必须在画布上设计一个绘画应用程序。有一个功能，例如在画布上动态添加所选图像（通过鼠标移动）以及删除和拖动添加的图像的功能（与文本添加相同）。现在我的问题是我们如何从画布中删除图像（注意：添加到画布中的图像没有固定数量。）您能给我建议一下方法吗？
I am new to canvas (HTML5) i have to design a paint application on canvas. There is a feature like dynamic addition of the selected image at canvas (on mouse-movements) and functionality to delete and drag that added image (Same for Text addition). Now my Question is how can we delete the images from the canvas (Note :There are no fixed no. of images added to the canvas.) Can you please suggest me the approach ??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
HTML5 Canvas 很像现实世界的画布。当您在画布上绘制时，墨水会改变画布，与已有的其他内容混合并永远改变它们。
问莫奈“你如何在你的画中添加一个新人物？”，他可能会说“你只需将他们画在你想要的地方！”同样，你使用
drawImage()来“绘制”图像你的画布。然而，如果你问莫奈“你如何从画中移除一个人？”，他可能会滑稽地看着你，然后回答“Quoi？你必须要么制作一幅新画，要么在人的上面画画！”同样，如果你想从画布上“删除”某些东西，你要么必须重新开始（清除画布并绘制除画布之外的所有内容）那个东西）或重新绘制你“背后”的东西其顶部的图像。
这是我制作的一个示例，它展示了一种“保存”画布部分的方法（通过将其绘制到另一个画布上）画布），然后将其拉回某物上以“擦除”它。
不过，我通常建议您不要使用 HTML5 Canvas，除非您知道为什么需要它。您提到添加和删除项目，以及检测鼠标移动。使用保留模式绘图系统（例如 HTML 或 SVG）意味着您实际上在对象表示中添加、删除或更改项目，并且由其他人（浏览器）来弄清楚如何最好重新绘制它们。
您可能会得到最好的服务，让用户输入的“绘制”部分在一个或多个画布上完成，然后将这些画布与其他项目（例如
与文本，或![]()
您可以在画布类型上创建自己的保留模式系统，也可以使用其他人的库来执行此操作。但我建议您考虑这是否是实现目标的最佳和最简单的方法。
An HTML5 Canvas is much like a real-world canvas. When you draw to the canvas the ink changes the canvas, blending with the other contents already there and forever changing them.
Ask Monet "How do you add a new person to your painting?" and he might say "you just paint them where you want them!" Similarly, you use
drawImage()to 'paint' an image to your Canvas.However, if you ask Monet "How do you remove a person from a painting?" and he would likely look at you funny and then respond "Quoi? You would have to either make a new painting, or else paint over top of the person!" Similarly, if you want to "remove" something from your canvas you either have to start over (clear the canvas and draw everything except that thing) or re-paint what was 'behind' your image on top of it.
Here is an example I made that shows one way that you can 'save' part of a canvas (by drawing it to another canvas) and then later drawing it back over something to 'erase' it.
However, I generally advise you not to use an HTML5 Canvas unless you know why you need it. You mention adding and removing items, and also detecting mouse movements. Using a retained-mode drawing system—like HTML or SVG—means that you actually add or remove or change items in an object representation, and it is up to someone else (the browser) to figure out how to best redraw them.
You may be best served by letting the "paint" portions of the user input be done on one or more canvases, and then compositing these canvases with other items (such as
<div>s with text, or<img>for pictures, or vector-based SVG artwork).You can make your own retained-mode system on type of canvas, or you can use someone else's library that does this. But instead I'd suggest that you consider whether this is the best and easiest way to accomplish your goals.