javascript - 关于canvas旋转
本文介绍了javascript - 关于canvas旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
$("#bt-lottery").one("click",function(){
var reg=1;
setInterval(function(){
ctx.save();
ctx.translate(249.5,249.5);//将原点移动到画布中心
ctx.rotate(reg*Math.PI/180);
ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);
ctx.drawImage(pin,-pin.width/2,-pin.height/2);
ctx.restore();
reg++;
},5);
});
我想要实现指针(pin.png)在转盘上(pan.png)旋转的功能,但是如果ctx.clearRect();就会出现如图的情况;我想要的结果是,该怎么实现呢??求教
解决方案
因为信息不足,我只能给出我的判断。
png不是透明的,这概率很小
你分成了两个canvas,但带指针的那个canvas有背景色,概率同样很小
代码问题:
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
//这里你需要绘制背景图片(转盘),或者将转盘作为离屏canvas分离出去(因为转盘不会变动),只绘制指针。 ---我猜你缺少了这一步。。
ctx.save();
ctx.translate(249.5,249.5);//将原点移动到画布中心
//ctx.clearRect(-pin.width/2,-pin.height/2,pin.width,pin.height);至于为什么清理出来的区域是个圆形跟你代码执行的顺序有关,先旋转后清理和先清理后旋转是不一样的。
ctx.rotate(reg*Math.PI/180);
ctx.drawImage(pin,-pin.width/2,-pin.height/2);
ctx.restore();
reg++;
},5);
这篇关于javascript - 关于canvas旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文