我的畫布沒有重置
[英]My canvas doesn't reset
問題描述
我正在做一個迷你游戲的BonusBar。 我創建了2個畫布，一個僅帶有邊框，另一個帶有綠色欄。
我的目標是，當x = 300時，清潔綠色畫布以重繪綠色矩形。
問題是未清除畫布。
這是代碼
var CarreBase = document.getElementById("CarreBase"); var CarreBasectx = CarreBase.getContext("2d"); var x = 0; var CarreRempli = document.getElementById("CarreRempli"); var CarreRemplictx = CarreRempli.getContext("2d"); BarreBonus(); function BarreBonus() { x = x + 30; console.log(x) if (x > 300) { CarreRemplictx.clearRect(0, 0, x, 100); /*CarreRemplictx.rect(0,0,x,200); CarreRemplictx.fillStyle="009FE3"; CarreRemplictx.fill();*/ x = 0; changement = true; } CarreRemplictx.rect(0, 0, x, 200); CarreRemplictx.fillStyle = "00C327"; CarreRemplictx.fill(); setTimeout("BarreBonus ()", 1000); }
#CarreBase { width: 350px; height: 25px; left: 150px; top: 0px; border: 2px solid #000000; position: absolute; z-index: 1; } #CarreRempli { position: absolute; left: 150px; top: 0px; width: 355px; height: 27px; z-index: 0; }
<!DOCTYPE html> <meta charset="Unicode"> <html> <head> <link rel="stylesheet" type="text/css" href="syra.css" /> <title>syracuse</title> </head> <body> <canvas id="CarreBase"></canvas>Bonus Bar : <canvas id="CarreRempli"></canvas> <script src="js/syra.js"></script> </body> </html>
2 個解決方案
解決方案1
0 2017-12-14 19:58:15
var CarreBase = document.getElementById("CarreBase"); var CarreBasectx = CarreBase.getContext("2d"); var x = 0; var CarreRempli = document.getElementById("CarreRempli"); var CarreRemplictx = CarreRempli.getContext("2d"); BarreBonus(); var itr=0; function BarreBonus() { x = x + 30; console.log(x) if (x > 300) { itr++; CarreRemplictx.clearRect(0, 0, x, 200); CarreRemplictx.beginPath(); //CarreRemplictx.rect(0,0,x,200); CarreRemplictx.fillStyle="GREEN"; //CarreBasectx.fillStyle="GREEN"; CarreRemplictx.fill(); //CarreBasectx.fill(); if(itr>1) return ; else x = 0; changement = true; } else{ CarreRemplictx.rect(0, 0, x, 200); CarreRemplictx.fillStyle = "00C327"; CarreRemplictx.fill(); } setTimeout("BarreBonus ()", 1000); }
#CarreBase { width: 350px; height: 25px; left: 150px; top: 0px; border: 2px solid #000000; position: absolute; z-index: 1; } #CarreRempli { position: absolute; left: 150px; top: 0px; width: 355px; height: 27px; z-index: 0; }
<!DOCTYPE html> <meta charset="Unicode"> <html> <head> <link rel="stylesheet" type="text/css" href="syra.css" /> <title>syracuse</title> </head> <body> <canvas id="CarreBase"></canvas>Bonus Bar : <canvas id="CarreRempli"></canvas> <script src="js/syra.js"></script> </body> </html>
- 您在
clearrect()使用了100而不是200，而后者只清除了矩形的一半。 -
beginPath()方法開始一個路徑，或重置當前路徑。但是您沒有。
解決方案2
0 2017-12-14 20:23:53
因為填充了所有舊路徑，所以給feel()麻煩。 若要解決此問題，請使用'CarreRemplictx.beginPath（）;' 重置當前的默認路徑。
附加信息：
4.12.5.1.12繪制畫布的路徑
11繪制畫布的路徑
重寫此代碼，但是例如...
var CarreBase = document.getElementById("CarreBase"); var CarreBasectx = CarreBase.getContext("2d"); var x = 0; var CarreRempli = document.getElementById("CarreRempli"); var CarreRemplictx = CarreRempli.getContext("2d"); BarreBonus(); function BarreBonus() { x = x + 30; console.log(x) if (x > 300) { CarreRemplictx.clearRect(0, 0, x, 200); CarreRemplictx.beginPath(); /*CarreRemplictx.rect(0,0,x,200); CarreRemplictx.fillStyle="009FE3"; CarreRemplictx.fill();*/ x = 0; changement = true; } else { CarreRemplictx.fillStyle = "#00C327"; CarreRemplictx.rect(0, 0, x, 200); CarreRemplictx.fill(); /* or single CarreRemplictx.fillRect(0, 0, x, 200);*/ } setTimeout(BarreBonus, 1000); }
#CarreBase { width: 350px; height: 25px; left: 150px; top: 0px; border: 2px solid #000000; position: absolute; z-index: 1; } #CarreRempli { position: absolute; left: 150px; top: 0px; width: 355px; height: 27px; z-index: 0; }
<!DOCTYPE html> <meta charset="Unicode"> <html> <head> <link rel="stylesheet" type="text/css" href="syra.css" /> <title>syracuse</title> </head> <body> <canvas id="CarreBase"></canvas>Bonus Bar : <canvas id="CarreRempli"></canvas> <script src="js/syra.js"></script> </body> </html>
HTML2canvas和Canvas2image，下載的截圖不會顯示我的HTML圖像
[英]HTML2canvas and Canvas2image, downloaded screenshot doesn't show my HTML images
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.