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

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

javascript html canvas

Javascript 使用数组中的值旋转画布时出错,javascript,html,canvas,rotation,Javascript,Html,Canvas,Rotation,我在这个程序中的目标是归档一种在cavas中正确显示数组值的方法，将每个值转换为像素的颜色。尽管最初的任务是在程序的第一步完成的，但当我尝试将画布旋转n度时，画布只是从浏览器中消失这有什么问题吗 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Rectangles</title> <

我在这个程序中的目标是归档一种在cavas中正确显示数组值的方法，将每个值转换为像素的颜色。尽管最初的任务是在程序的第一步完成的，但当我尝试将画布旋转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>

您的Rotar函数将在文档完成加载后被调用，可能只需单击一个按钮。该函数包含document.write语句。试图在已加载的网页上执行document.write操作会导致内容清除

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

Thaks。这正是问题所在。