Question

我为迷你游戏做了BonusBar。我创建了2个画布，一个只有边框，另一个有绿色条。

我的目标是，当x = 300时，清洁绿色画布以重绘绿色矩形。

问题是画布未被清除。

这里是代码

＆＃13;

        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);
        }

＆＃13;

 #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;
 }

＆＃13;

<!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>

＆＃13;

Answer 1

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()方法开始路径，或重置当前路径。但是你没有。

Answer 2

问题feel()因为填写了所有旧路径。要解决此问题，需要使用'CarreRemplictx.beginPath（）;' 重置当前默认路径。
附加信息：
4.12.5.1.12 Drawing paths to the canvas
11 Drawing paths to the canvas

重写此代码，但例如......

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>

我的画布没有重置

2 个答案: