如何在Javascript中创建n个画布？

Question

I am looking for a way to create canvases as I need them at run time. 我正在寻找一种在运行时根据需要创建画布的方法。 my code so far is 到目前为止，我的代码是

    var isCanv = new Array();//bool array for which places in the arrays are/are not in use
    var canv = new Array();//for the canvases
    var ctx = new Array();//for the contexts
    var inhtml = new Array();//for the html canvas tags for each canvas
    var upperBound = -1;//the highest index used so far

    function createCtx(){
      var i = 0;
      while(isCanv[i]){
        i++;
      }
      inhtml[i] = '<canvas id="canv'+i+'" width="'+800+'px" height="'+800+'px" style="display:block;background:#ffffff+;"></canvas>';
      isCanv[i] = true;
      if(i>upperBound){
        upperBound = i;
      }
      var tohtml = '';
      for(var j = 0; j<= upperBound; j++){
        if(isCanv[i]){
          tohtml+=inhtml[j];
        }
      }
      document.getElementById('game').innerHTML=tohtml;
      canv[i] = document.getElementById('canv'+i);
      ctx[i] = canv[i].getContext('2d');
      return(i);
    }

    function keyEvent(event) {
      var i = 0;
      while(isCanv[i]){
        ctx[i].fillStyle="#00FFFF";
        ctx[i].fillRect(0,0,800,800);
        i++;
      }
    }

and the html looks like this 和HTML看起来像这样

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>redicated</title>
      </head>
      <body style="background:#333333;" onkeydown="keyEvent(event)">
        <div id="game"></div>
        <script src="game.js"></script>
      </body>
    </html>

This works for the first canvas, but any subsequent addition breaks it all. 这适用于第一个画布，但是任何后续添加都会破坏这一切。 Does anyone know how I could fix this, or of a better way of doing it? 有谁知道我该如何解决这个问题，或者有更好的解决方法？

Edit: 编辑：

I figured it out. 我想到了。 I need to recreate the context every time there is an addition. 每当需要添加内容时，我都需要重新创建上下文。 now my code looks like 现在我的代码看起来像

    function createCtx(){
      var i = 0;
      while(isCanv[i]){
        i++;
      }
      inhtml[i] = '<canvas id="canv'+i+'" width="'+800+'px" height="'+800+'px" style="display:block;background:#ffffff+;"></canvas>';
      isCanv[i] = true;
      if(i>upperBound){
        upperBound = i;
      }
      var tohtml = '';
      for(var j = 0; j<= upperBound; j++){
        if(isCanv[j]){
          tohtml+=inhtml[j];
        }
      }
      document.getElementById('game').innerHTML=tohtml;
      for(var j = 0; j<= upperBound; j++){
        if(isCanv[j]){
          canv[j] = document.getElementById('canv'+j);
          ctx[j] = canv[j].getContext('2d');
        }
      }

      return(i);
    }

Answer 1

The for loop: for循环：

 for(var j = 0; j<= upperBound; j++){
    if(isCanv[i]){
      tohtml+=inhtml[j];
 }

is only ran once since when it is first executed j == upperBound. 自第一次执行j == upperBound以来，它仅运行过一次。 To fix this try removing 要解决此问题，请尝试删除

  if(i>upperBound){
    upperBound = i;
  }

and whats the point of upperBound anyways it will always be equivalent to i so why not just use that. 而且无论如何，upperBound的要点总是等同于我，所以为什么不仅仅使用它。

如何在Javascript中创建n个画布？

问题描述

1 个解决方案

解决方案1
0

如何在Javascript中创建n个画布？

问题描述

1 个解决方案

解决方案1 0

解决方案1
0