1

ミニゲームのBonusBarをやっています。2 つのキャンバスを作成しました。1 つは境界線のみ、もう 1 つは緑色のバーです。

私の目的は、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

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 に答える