0

我有一个画布，你可以用鼠标画东西。当我单击按钮时，它必须捕获绘图并将其添加到画布下方，并清除前一个以绘制新的东西。所以第一个画布必须是静态的其他的必须用我画的图动态创建..我该怎么办谁能帮忙

这是jsfiddle http://jsfiddle.net/dQppK/378/

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 0;
4

2 回答 2

0

这是我为此使用的功能，它是我制作的库的一部分，用于简化有关画布的一些事情。我只是把它放在github上，以防其他功能可能有用，我稍后必须做一个自述文件......

https://github.com/gamealchemist/CanvasLib

删除命名空间后，插入画布的代码如下：

// insert a canvas on top of the current document.
// If width, height are not provided, use all document width / height
// width / height unit is Css pixel.
// returns the canvas.
insertMainCanvas = function insertMainCanvas (_w,_h) {
   if (_w==undefined) { _w = document.documentElement.clientWidth & (~3)  ; }
   if (_h==undefined) { _h = document.documentElement.clientHeight & (~3) ; }
   var mainCanvas = ga.CanvasLib.createCanvas(_w,_h);
   if ( !document.body ) { 
          var aNewBodyElement = document.createElement("body"); 
              document.body = aNewBodyElement; 
   };
   document.body.appendChild(mainCanvas);
   return mainCanvas;
}
于 2013-08-08T00:10:09.403 回答
0

您可以像创建任何元素一样创建新画布：

var newCanvas = document.createElement('canvas');

然后你可以复制你的旧画布：

newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas);
ctx = newCanvas.getContext('2d');

但是如果你只是想清理你的绘图表面，那有什么问题clearRect呢？

ctx.clearRect(0, 0, canvas.width, canvas.height);

或者，在您的情况下，另一个fillRect. 更新的演示

于 2013-08-08T00:14:29.713 回答