Question

我在这个程序中的目标是存档一种方法，在卡瓦斯中正确显示数组的值，将每个值转换为像素的颜色。尽管原始任务是在程序的第一步完成的，但当我尝试将画布转换为n度时，画布就会从浏览器中消失！

这可能有什么问题？

   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Rectangles</title>
         <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            background: #eeeeee;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width="200" height="200">
      Canvas not supported
    </canvas>

    <br>

    <button type="button"id="disminuir" onclick="Rotar()">Rotar</button>

    <script >
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');



    //GIRADOR



    ctx.translate(canvas.width / 2, canvas.height / 2); //Esto sitúa en el centro del canvas el origen de coordenadas



    //FIN GIRADOR




    var array = new Array2D(200,200);


    //MAIN

    for(i=0; i<200; i++)
    {
      for(j=0;j<200; j++)
      {
      array[i][j]=i+j;
      document.write(array[i][j]);
      document.write("\n");
      var r,g,b;
      r = array[i][j];
      g=50;
      b=50;
      //La parte de dibujo
      ctx.fillStyle = "rgba("+r+","+g+","+b+",100)";
      ctx.fillRect( i, j, 1, 1 );

      }
    }

    //FUNCIONES

    function Array2D(NumOfRows,NumOfCols)
    {
    var k=new Array(NumOfRows);
    for (i = 0; i < k.length; ++i)
    k[i] = new Array(NumOfCols);
    return k; 
    }

    function Rotar(){
    //Rotamos el lienzo?
    ctx.rotate(Math.PI / 180);

    for(i=0; i<200; i++)
    {
      for(j=0;j<200; j++)
      {
      array[i][j]=i+j;
      document.write(array[i][j]);
      document.write("\n");
      var r,g,b;
      r = array[i][j];
      g=50;
      b=50;
      //La parte de dibujo
      ctx.fillStyle = "rgba("+r+","+g+","+b+",100)";
      ctx.fillRect( i, j, 1, 1 );

      }
    }



    }

    </script>
  </body>
</html>

Answer 1

文档完成加载后，您的Rotar函数被称为（大概是按下按钮）。该函数包含document.write个语句。尝试在已加载的网页上执行document.write会导致内容清除。

将document.write语句替换为console.log，或使用jQuery将文字附加到正文上。只需确保将文本附加到子元素（如div）中，以避免使用canvas元素刷新整个DOM树。

使用数组中的值旋转画布时出错

1 个答案: