首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html5 canvas怎么以某个中心点旋转图片

2012-06-26 
html5 canvas如何以某个中心点旋转图片var num0function draw(){num+1if(num60)num1cxt.clearRect

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();
}

热点排行