猿问

html5 canvas画布无法清除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: black;
}
#c1{
background: white;
}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
var num2 = 0;
var value = 1;
oGC.translate(100,100);
setInterval(function(){
num++;
oGC.save();//保存路径
oGC.clearRect(0,0,oC.width,oC.height);
if(num2 == 100){
value = -1;
}
else if(num2 == 0){
value = 1;
}
num2 += value;
oGC.scale(num2*1/50,num2*1/50)
oGC.rotate(num*Math.PI/180);
oGC.translate(-50,-50);
oGC.fillRect(0,0,100,100);
oGC.restore();//回复路径
},30);
};
</script>
</head>
<body>
<canvas id="c1" width="600" height="600">

</canvas>
</body>
</html>
当大小增加到100之后就没办法清除掉外层的黑块了，为什么会出现这种状况？求助

慕虎7371278
浏览 784回答 2
2回答

MMTTMM

如下代码 不修改代码 更换位置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head><meta&nbsp;charset="UTF-8"><title>Document</title><style>body{background:&nbsp;#cccccc;}#c1{background:&nbsp;white;}</style><script>window.onload&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oC&nbsp;=&nbsp;document.getElementById('c1');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oGC&nbsp;=&nbsp;oC.getContext('2d');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num2&nbsp;=&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;value&nbsp;=&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num++;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.save();//保存路径&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.clearRect(0,0,oC.width,oC.height);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.translate(100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(num2&nbsp;==&nbsp;100){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;-1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(num2&nbsp;==&nbsp;0){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num2&nbsp;+=&nbsp;value;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.scale(num2*1/50,num2*1/50)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.rotate(num*Math.PI/180);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.translate(-50,-50);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.fillRect(0,0,100,100);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oGC.restore();//回复路径&nbsp;&nbsp;&nbsp;&nbsp;},30);};</script></head><body><canvas&nbsp;id="c1"&nbsp;width="600"&nbsp;height="600">&nbsp;</canvas></body></html>save方法&nbsp; 和 restore方法有点像弹栈&nbsp; 也就是先进后出.&nbsp;&nbsp; 这样你就要把oGC.translate&nbsp;作为一个整体,因为translate方法也是被记录在save方法里&nbsp;&nbsp; 我是从形像上来理解 然后移了一下代码&nbsp;
0

浮云间

擦除canvas画布有两个方法可以使用：clearRect方法重新设置高宽度示例：12345678910/*&nbsp;本示例使用jQuery描述&nbsp;*/var&nbsp;canvas&nbsp;=&nbsp;$('#myCanvas');&nbsp;&nbsp;//选择要擦除的canvas元素var&nbsp;context&nbsp;=&nbsp;canvas.get(0).getContext('2d');&nbsp;&nbsp;//获取canvas上下文&nbsp;//第一种方法擦除（clearRect方法）context.clearRect(0,&nbsp;0,&nbsp;canvas.width(),&nbsp;canvas.height());&nbsp;//第二种方法擦除（重新设置高宽度）canvas.attr('width',&nbsp;canvas.width());canvas.attr('height',&nbsp;canvas.height());&nbsp;
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答