1

我正在为迷你游戏制作 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>

4

2 回答 2

0 

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>

  • 您使用了 100 而不是 200，clearrect()其中只清除了一半的矩形。
  • 该beginPath()方法开始一个路径，或重置当前路径。但你没有。
于 2017-12-14T19:58:15.547 回答
0

麻烦是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>

于 2017-12-14T20:23:53.060 回答