javascript - 如何在javascript中动态创建画布(how to create a canvas dynamically in javascript)

Question

I have a canvas that you can draw things with mouse.. When I click the button It has to capture the drawing and add it right under the canvas, and clear the previous one to draw something new..So first canvas has to be static and the other ones has to be created dynamically with the drawing that I draw .. What should I do can anybody help

(我有一个可以用鼠标画东西的画布。单击按钮时，它必须捕获绘图并将其添加到画布的正下方，并清除前一个以绘制新的东西。因此，第一个画布必须是静态的而其他的则必须使用我绘制的图纸来动态创建。.我该怎么办？)

here is jsfiddle http://jsfiddle.net/dQppK/378/

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

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

  ask by regeme translate from so

Answer 1

here's the function i use for this, it is part of a library i made and use to ease a few things about canvas.

(这是我为此使用的功能，它是我创建的库的一部分，并用来简化画布的一些操作。)

I just put it on github in case other function might be be of use, i'll have to make a readme later...

(我只是将其放在github上，以防其他功能可能有用，以后我将不得不自述...)

https://github.com/gamealchemist/CanvasLib

(https://github.com/gamealchemist/CanvasLib)

with namespaceing removed, the code is as follow to insert a canvas :

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

// 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;
}