我的画布无法重置
My canvas doesn't reset
我正在为一个迷你游戏做一个奖金栏。我创建了 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>
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>
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()
方法开始路径,或重置当前路径。但您没有。
相关文章:
- 无法将数据从firebase获取到我的html页面
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 我的外部js文件无法加载
- 由于某种原因,我的JavaScript函数无法工作
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小,无法在我的代码中发现错误
- 无法在我的JSON文件中发布数据
- datepicker()在我的页面中无法使用jquery
- 无法在我的示例plunker中使用继承/隔离的范围概念
- chart.js在我的本地主机上运行良好,但无法在线运行
- 点击功能无法处理我的所有文件
- 无法使我的文本参数与我的查询一起工作
- 快递.js无法获取我的 CSS 文件
- 无法弄清楚为什么我的标题的其余部分不会显示
- 为什么我的HTML似乎无法访问我的javascript
- 无法让谷歌地图显示在我的网站上
- 将我的列表 vom ng-repeat 更改为收集重复 ng-click 后,无法正常工作
- 我无法在操作方法中将我的文件传递给 httppostedfilebase
- 我无法理解的主干库代码模式
- 我的 AJAX 请求对象无法正确解析 URL 的协议部分