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