如何在Canvas html5中仅旋转一个正方形

Question

你好我用帆布做练习，我想只旋转一个正方形，因为当我使用方法c.rotate( Degrees*Math.PI/180 );旋转所有画布时，因为当我移动原点时，正方形是去的其他地方。

例如我在（）

中有这个方块

我将方形旋转45度

我移动广场的位置（0,0），但它去其他地方

Answer 1

将方块移动到位置（-square.width / 2，-square.height / 2）

Answer 2

案例翻译

case 1: //trasladar
    X = prompt("Selecciona una cordenada para trasladar X");
    Y = prompt("Selecciona una cordenada trasladar Y");
    Xreal=X*20;
    Yreal=Y*20;
    PuntoX= 400+Xreal;
    PuntoY= 200-Yreal;

      if(ban==1){
        c.clearRect(0, 0, canvas.width, canvas.height) 
        c.fillStyle="red";
        c.fillRect(PuntoX,PuntoY,40,40);
      }
      

案例轮换

  case 2:
    if(ban==1){
      c.save();
      var D = prompt("Degree");
     c.clearRect(0, 0, canvas.width, canvas.height)
       c.translate(PuntoX,PuntoY);

      c.rotate( D*Math.PI/180 );
      c.translate(-(PuntoX),-(PuntoY));
      c.fillRect(PuntoX,PuntoY,40,40);
      c.restore()