html5原生canvas內image旋轉

目前理解下來就是旋轉的不是image本身，而是要drawImage的那個canvas的2d context,context本身的繪制就是把圖片本來的樣子draw出來，至於旋轉，透明度之類的效果都是對context在操作。

至於做到讓image繞自身中心店改變角度的做法，就是讓context坐標轉換，並且讓context改變角度,context.rotate()方法接受根據角度轉換之后的弧度。

 

設置一個坐標，讓image坐上角定位在此坐標並以此坐標為錨點選轉

  context.translate(buildingImgX,buildingImgY);
        context.rotate(50 * Math.PI / 180);
        context.translate(-buildingImgX,-buildingImgY);
        context.drawImage(buildingImg,buildingImgX ,buildingImgY );

 

設置一個坐標，讓image中心店點定位在此坐標並以此坐標為錨點選轉

  buildingImgX = canvasWidth - buildingImg.width/2 - 100;
        buildingImgY = canvasHeight / 2;

        context.translate(buildingImgX,buildingImgY);
        context.rotate(10 * Math.PI / 180);
        context.translate(-buildingImgX,-buildingImgY);
        context.drawImage(buildingImg,buildingImgX - buildingImg.width/2,buildingImgY - buildingImg.height/2);

 

 

 

 

 

轉帖別人代碼：

 var canvas = document.getElementById('c1');
    var ctx1 = canvas.getContext('2d');
    var image1 = new Image();
    image1.onload = function() {
      // regular rotation about center
      var xpos = canvas.width/2;
      var ypos = canvas.height/2;
      ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
      ctx1.save();
      ctx1.translate(xpos, ypos);
      ctx1.rotate(47 * Math.PI / 180);//旋轉47度
      ctx1.translate(-xpos, -ypos);
      ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
      ctx1.restore();
    }
    image1.src = 'image.png';