undo redo 的原理实际上很简单，就是当每执行一次绘画，则将画板的内容转换成base64编码的字符串，存到缓存数组中去，然后在需要undo 的时候，将画板清空，再将缓存数组中的最后一次编辑的图片绘制到画板上即可。相关的实现细节如下代码所示：

//undo redo var history =new Array(); var cStep = -1; /** * put current canvas to cache */ function historyPush() { cStep++; if (cStep < history.length) { history.length = cStep; } history.push($("#myCanvas").get(0).toDataURL()); } /** * function: undo */ function undo() { if (cStep >= 0) { cStep--; var tempImage = new Image(); tempImage.src = history[cStep]; tempImage.onload = function () { ctx.drawImage(tempImage, 0, 0);}; } } /** * function: redo */ function redo() { if (cStep <history.length-1) { clearCanvas(); cStep++; var tempImage = new Image(); tempImage.src = history[cStep]; tempImage.onload = function () { ctx.drawImage(tempImage, 0, 0); }; } }
画板信息存为图片

代码如下：

/** * save canvas content as image */ function saveItAsImage() { var image = $("#myCanvas").get(0).toDataURL("image/png").replace("image/png", "image/octet-stream"); //locally save window.location.href=image; }

源码下载       读者可以去我的GitHub jPainter 项目下下载，或者直接使用git 工具：https://github.com/LuanLouis/jPainter.git

-----------------------------------------------------------------------------------------------------------------------------------------

本文源自  ，如需转载，请注明出处，谢谢！

html5 canvas有图形界面的工具

<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器）你必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
你所说的图形界面工具是想通过一个按钮或者操作来完成一个或者一组复杂的绘图动作吗？目前好像没有而且也没有必要，因为它只是一个标签。w3c提供了一些api，只需简单的几行代码就能画出矩形，圆弧，直线等。如果需要画更复杂的图形，需要你自己动手。因为这些图形复用率肯定很低，不会形成共用的元素。

对于html5中的canvas画图，做的图形在浏览器中没显示

建议查看显示浏览器的版本，html5毕竟不是很成熟，很多老版本的浏览器是不支持的哦