如何在javascript中动态创建画布

how to create a canvas dynamically in javascript

本文关键字：创建 动态 javascript      更新时间：2023-09-26

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

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

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 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。更新的演示

这是我为此使用的函数，它是我制作的库的一部分，用于简化关于画布的一些事情。我只是把它放在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;
}
相关文章：