canvas内image旋转

Posted 2020-06-13

目前理解下来就是旋转的不是image本身，而是要drawImage的那个canvas的2d context,context本身的绘制就是把图片本来的样子draw出来，至于旋转，透明度之类的效果都是对context在操作。

至于做到让image绕自身中心店改变角度的做法，就是让context坐标转换，并且让context改变角度,context.rotate()方法接受根据角度转换之后的弧度。

 

     　  var xpos = 100;
        var ypos = 100;
        context.drawImage(img, xpos - img.width / 2, ypos - img.height / 2);
        context.save();
        context.translate(xpos, ypos);
        context.rotate(50 * Math.PI / 180);//旋转50度
        context.translate(-xpos, -ypos);
        context.drawImage(img, xpos - img.width , ypos - img.height ,img.width *2,img.height*2);
        context.restore();