<!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之后就没办法清除掉外层的黑块了，为什么会出现这种状况？求助
2 回答
MMTTMM
TA贡献1869条经验 获得超4个赞
如下代码 不修改代码 更换位置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #cccccc; } #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;
setInterval(function(){
num++;
oGC.save();//保存路径 oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(100,100); 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> |
save方法 和 restore方法有点像弹栈 也就是先进后出. 这样你就要把oGC.translate 作为一个整体,因为translate方法也是被记录在save方法里 我是从形像上来理解 然后移了一下代码
浮云间
TA贡献1829条经验 获得超4个赞
擦除canvas画布有两个方法可以使用：
clearRect方法
重新设置高宽度
示例：
1 2 3 4 5 6 7 8 9 10 | /* 本示例使用jQuery描述 */ var canvas = $('#myCanvas'); //选择要擦除的canvas元素 var context = canvas.get(0).getContext('2d'); //获取canvas上下文
//第一种方法擦除（clearRect方法） context.clearRect(0, 0, canvas.width(), canvas.height());
//第二种方法擦除（重新设置高宽度） canvas.attr('width', canvas.width()); canvas.attr('height', canvas.height()); |
- 2 回答
- 0 关注
- 783 浏览
添加回答
举报
0/150
提交
取消