简体繁体 English

是否可以在画布HTML5中设置背景图像，并且可以做一些绘画功能，例如撤消，擦除，清除，保存该背景图像？

[英]Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?

原文 2011-12-03 11:07:59 3 3 javascript/ jquery/ canvas/ html5-canvas

I want to know about canvas HTML5. 我想了解画布HTML5。 In my base canvas element i want to set background image,and on that i want to perform some functionality like in paint Erase,Undo,Clear and save that effected image(after applying all the effect undo,clear).. Any suggestion or example.. 在我的基本画布元素中，我想要设置背景图像，并希望在其上执行一些功能，例如在绘画中擦除，撤消，清除并保存所影响的图像（在应用所有效果撤消，清除之后）。任何建议或示例..

3 个解决方案

You can draw the Background to the canvas, by using drawImage(). 您可以使用drawImage（）将背景绘制到画布上。 All further Manipulations are painted ontop the Image. 所有进一步的操作均绘制在图像上方。

When you hav finished your work you can Export your Canvasstate to an Image. 完成工作后，可以将Canvasstate导出到图像。

But you have to Hold a History for all task, because the canvas will be directly modified. 但是您必须为所有任务保留历史记录，因为画布将被直接修改。

May be the Save and restore Method are helpful. 可能是“保存和还原方法”有用。

It is important, that you draw your image to the canvas first, so all other effects will affect the image. 重要的是，首先将图像绘制到画布上，以便所有其他效果都将影响图像。

最简单，最佳的性能实践是将背景作为div放在画布后面。

The history API can be used for undo and redo. 历史记录API可用于撤消和重做。

The toDataURL method of the Canvas object can be used to save an image. Canvas对象的toDataURL方法可用于保存图像。