关于html5中canvas动画的问题
我想要的效果是一个正方形在旋转中放大缩小，但是clearRect并没有完全清除画布导致有重影，请教一下是哪里出了问题，下面是主要代码<style>body{backgro...
我想要的效果是一个正方形在旋转中放大缩小，但是clearRect并没有完全清除画布导致有重影，请教一下是哪里出了问题，下面是主要代码
<style>
body{background: black;}
#c1{background: white;}
</style>
<body>
<canvas id="c1" width="800" height="800"></canvas>
<script>
var ob=document.getElementById('c1');
var oc=ob.getContext('2d');
oc.translate(300,300);
var num=0;
var num2=0;
var values=1;
setInterval(function(){
num++;
oc.clearRect(0,0,ob.width,ob.height);
oc.save();
if(num2==100){
values=-1;
}else if(num2==0){
values=1
};
num2+=values;
oc.scale(num2*1/50,num2*1/50);
oc.rotate(num*Math.PI/180);
oc.translate(-50,-50);
oc.fillRect(0,0,100,100);
oc.restore();
},30);
</script>
</body> 展开
<style>
body{background: black;}
#c1{background: white;}
</style>
<body>
<canvas id="c1" width="800" height="800"></canvas>
<script>
var ob=document.getElementById('c1');
var oc=ob.getContext('2d');
oc.translate(300,300);
var num=0;
var num2=0;
var values=1;
setInterval(function(){
num++;
oc.clearRect(0,0,ob.width,ob.height);
oc.save();
if(num2==100){
values=-1;
}else if(num2==0){
values=1
};
num2+=values;
oc.scale(num2*1/50,num2*1/50);
oc.rotate(num*Math.PI/180);
oc.translate(-50,-50);
oc.fillRect(0,0,100,100);
oc.restore();
},30);
</script>
</body> 展开
1个回答
展开全部
改成
oc.clearRect(-150,-150,ob.width,ob.height);
即可
oc.clearRect(-150,-150,ob.width,ob.height);
即可
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
