<!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();//回復(fù)路徑},30);};</script></head><body><canvas id="c1" width="600" height="600"></canvas></body></html>當(dāng)大小增加到100之后就沒辦法清除掉外層的黑塊了，為什么會出現(xiàn)這種狀況？求助
2 回答
吃雞游戲
TA貢獻(xiàn)1829條經(jīng)驗 獲得超7個贊
如下代碼 不修改代碼 更換位置
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();//回復(fù)路徑 },30); }; </script> </head> <body> <canvas id="c1" width="600" height="600">
</canvas> </body> </html> |
save方法 和 restore方法有點像彈棧 也就是先進后出. 這樣你就要把oGC.translate 作為一個整體,因為translate方法也是被記錄在save方法里 我是從形像上來理解 然后移了一下代碼
繁星點點滴滴
TA貢獻(xiàn)1803條經(jīng)驗 獲得超3個贊
擦除canvas畫布有兩個方法可以使用：
clearRect方法
重新設(shè)置高寬度
示例：
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());
//第二種方法擦除（重新設(shè)置高寬度） canvas.attr('width', canvas.width()); canvas.attr('height', canvas.height()); |
- 2 回答
- 0 關(guān)注
- 499 瀏覽
添加回答
舉報
0/150
提交
取消