日期:2014-05-17  浏览次数:20710 次

html5 canvas如何以某个中心点旋转图片
var num=0;
function draw()
{
num+=1;
if(num==60)
num=1;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
//将坐标原点平移到当前图片所在的位置,width,height分别为图片的坐标,这个可以根据自己的需要进行更改
   cxt.translate(width,height);
//将坐标原点平移到要中心点,这里是以图片的底部为中心点进行旋转13,62为图片本身的中心点
    cxt.translate(13,62);
//每次旋转6度
    cxt.rotate(num*(Math.PI/30));
    cxt.translate(-13,-62);
//因为是以图片的底部作为中心点,所以这时候的图片位置在画布的原点上
    cxt.drawImage(aimg,0,0);
    cxt.restore();
}