Javascript 在图形中显示数组的Html5画布不会旋转

在这里你可以找到我的小程序的代码

它的目的是了解如何旋转一个描述二维数组值的正方形，以便实现二维数学数组的可视化

为什么它不顺时针或逆时针转动

var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    //GIRADOR
    ctx.translate(canvas.width / 2, canvas.height / 2);     
    //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;

          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 );
          }
    }

    //FUNCTIONS

    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);
     ctx.fillStyle = "red";
      ctx.fillRect( -200, -200, 600, 600 );
    for(i=0; i<200; i++)
    {
      for(j=0;j<200; j++)
      {
      array[i][j]=i+j;
      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 );
      }
    }



}

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//牛郎
ctx.translate（canvas.width/2，canvas.height/2）；
//长臂猿
var阵列=新阵列2d（200200）；
//主要
对于（i=0；i
context.translate
将设置旋转点。所有后续图形将围绕该点旋转

因此，如果您随后绘制矩形，则矩形将在平移点处绘制其左上角。矩形将围绕其自身的左上角旋转

要围绕矩形的中心点旋转矩形，可以将fillRect的x、y设置为-width/2，-height/2

此外，转换（平移、旋转）是累积的，因此您可能希望在
上下文中包装转换。保存
和
上下文。还原
，以便后续转换不会与以前的转换交互

下面是示例代码和演示，演示如何围绕矩形的中心点旋转矩形：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//用于定义矩形的变量
var x=100；
变量y=100；
var宽度=100；
var高度=75；
弧度角=0；
//画矩形
旋转正方形（）；
函数rotateSquare（）{
//清理画布
clearRect（0,0，canvas.width，canvas.height）；
//保存未旋转的上下文状态
ctx.save（）；
//在矩形的中心点设置旋转点
平移（x+宽度/2，y+高度/2）；
//设置旋转角度
旋转（弧度角）；
//画矩形
ctx.fillRect（-width/2，-height/2，width，height）；
ctx.strokeRect（-width/2，-height/2，width，height）；
//将上下文还原到其未旋转状态
ctx.restore（）；
}
$（“#测试”）。单击（函数（）{
//重置角度
弧度角+=Math.PI/60；
//呼叫旋转方
旋转正方形（）；
})；
canvas{边框：1px纯红；}

旋转

I现在可以正常工作和旋转。不是从它的中心开始，而是从它的1,1点开始，因为每次旋转正方形时都会绘制一个数组