Question

我已经编写了下面的代码，该代码在动态创建一个画布对象并用像素填充它时起作用，但是当我尝试创建多个时，它会出于某种原因清除第一个画布。任何人都有任何想法，为什么以及如何解决它？（JS FIddle似乎没有工作，所以有点长贴在这里）

    <head>
        <script type="text/javascript">
function createnew_canvas()
{
    var canvas_number = document.getElementById("hidden_counter").innerHTML.toString();
    var new_canvas = parseInt(canvas_number) + 1;
    document.getElementById("hidden_counter").innerHTML = new_canvas;
    var mydoc = document.getElementById("canvas_area");
    var mynewname = "canvas"+ canvas_number.toString();
    mydoc.innerHTML = mydoc.innerHTML + '<canvas id="'+ mynewname +'" width="1000" height="600">canvas</canvas><br/>';
    draw_canvas(canvas_number);
}

function setPixel(imageData, x, y, r, g, b, a) 
{   
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
function draw_canvas(canvasnum)
{
var myname = "canvas" + canvasnum;
element = document.getElementById(myname);
c = element.getContext("2d");  
// read the width and height of the canvas
element.width = document.documentElement.clientWidth ;
element.height = document.documentElement.clientHeight ;
width = element.width;
height = element.height;

// create a new pixel array
imageData = c.createImageData(width, height);
for (i= 0; i < width;i++)
{
    for (v =1; v <height - 400; v++)
    {
        if (i % 12 === 0 )
        {

           setPixel(imageData, i, 200 + v , 50* canvasnum, 50*canvasnum, 0, 255); // 255 opaque 

        }
        else
        {

             setPixel(imageData, i, 200 + v, 0, 0, 50*canvasnum, 255); // 255 opaque       
              }
    }    
}
c.putImageData(imageData, 0, 0); // at coords 0,0
}
</script>
    </head>
    <body>
       <div class="navbar">
            <div class="title">Canvas Maker</div>
            <div></div>
            <div></div>
            <div></div>
            <div class="addnewcanvas" onclick="createnew_canvas();"> +</div>
            <div id="hidden_counter">1</div>
        </div>
        <div id="canvas_area"></div>





    </body>

Answer 1

看起来你有：

var someString = "My String is Cool";
someString = someString.replace(' ','/');
alert(someString);

将设置元素的html，但这样做会导致那里的画布状态丢失。

您可能只想尝试将新元素附加到mydoc而不是设置html。

Answer 2

像这样追加画布

function createCanvas(id) {
   var canvasMade = document.createElement("canvas");
   canvasMade.id = id;
   document.body.appendChild(canvasMade);
}

希望这有助于......

为什么我的第一个画布清除？

2 个答案: