我的画布没有重置
[英]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.