目前理解下来就是旋转的不是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();
时间: 2024-11-08 18:58:39