画布 jquery 代码不调用第二个函数

Question

我正在尝试创建一个从 5.0 到 0 的简单倒计时。我有两个功能 - 一个用于绘制背景，一个用于显示倒计时。我是一名使用 Canvas 的初学者，因此在 w3schools clock_start 实用程序上对此进行了建模。我真的不明白它是如何工作的，但我假设时钟每秒完全绘制一次，这也是我也在尝试做的事情。我成功地使用函数 (drawGameBackground) 绘制了背景，但似乎根本没有调用 drawGameCountDown。

我确实意识到我还没有输入代码来停止倒计时为零。我只是挂断了功能，甚至开始倒计时。

我能得到的任何帮助将不胜感激。谢谢

 <%= render 'layouts/lobbyheader' %>
 <% provide(:button_text, 'Lobby') %>
 <% provide(:title_text, 'GAME') %>

 <canvas id ="game_canvas">
     'Your browser does not support the canvas element.'
 </canvas>

 <script>

  var canvas = document.getElementById("game_canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  var countIt = 50.1
  setInterval(drawGame,1000);
  function drawGame() {
     drawGameBackground(ctx); 
     drawGameCountDown(ctx,countIt);
  }

  function drawGameBackground(ctx,countIt) { 
     var x4 = .08 * window.innerWidth;            // x pos of title
     var y4 = .10 * window.innerHeight;            // y pos of title
     var x5 = .08 * window.innerWidth;            // x pos of "MaxProfit"
     var y5 = y4 + .05 * window.innerHeight;     // y pos of "Max Profit"
     var i = 0;
     var x = .06 * window.innerWidth;            // start of line
     var x1 = .07 * window.innerWidth;          //start of separators
     var y1 = .5 * window.innerHeight;         // top of separators
     var y2 = y1 + .025 * window.innerHeight;  // bottom of separators
     var z = .015 * window.innerWidth;    // increment between separators
     var x2 = z * 21;                    // end of line
     var y = y1 + (.0125 * window.innerHeight); //midpoint of sep line
     var x6 = x1 - 5;                // x start of the second lables
     var y3 = y2 + (.0125 * window.innerHeight);  // y pos of sec labels
     var x7 = .18 * window.innerWidth;            // x pos of the counter
     var y7 = .35 * window.innerHeight;           // y position ofcounter
     var s;                                // second
     var x4 = .08 * window.innerWidth;        // x position of "GAME"
     var y4 = .10 * window.innerHeight;       // y position of "GAME"
     ctx.fillStyle = "#ffffff";
     ctx.fill();
     ctx.font = "35px Rock Salt";
     ctx.fillText("GAME", x4, y4);
     ctx.font = "15px Tahoma";
     ctx.fillText("Max Profit: 10 000 000 Coins", x5, y5);
     ctx.beginPath();
     ctx.moveTo(x,y);    
     ctx.lineTo(x2,y);
     ctx.lineWidth = .5;
     ctx.strokeStyle = "#000000";                                                                        
     ctx.lineWidth = 1;
     ctx.stroke();
     while (i < 17){
        s = i + 1;
        ctx.font = "10px Tahoma";
        ctx.fillText(s + "s", x6, y3);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x1,y2);
        x1 = x1 + z;
        x6 = x6 + z;
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 1;
        ctx.stroke();
        i++;
     }
  }

  function drawGameCountDown(ctx, countIt) {

         countIt = (countIt - .1).toFixed(1);
         ctx.fillStyle = "#ffffff";
         ctx.fill();
         ctx.font = "35px Tahoma";
         ctx.fillText(countIt, x7, y7);
  }

我希望以每秒 1 个数字的速度看到倒计时。我只看到背景，看不到倒计时。

Answer 1

我运行了你的代码，看看是否有任何错误。（使用 chrome -> devtool -> 控制台） 并发现x7和y7没有定义在drawGameCountDown中，因为它们只是存在于drawGameBackground函数范围内。

也许你可以把公共变量移到外面。

一旦画布成功绘制了这两个东西，您就可以使用window.requestAnimationFrame(draw); 创建一个新框架并在其上放置下一个计数和背景。

喜欢 MDN 上的这个演示：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_solar_system

这是显示数字的固定 sn-p：

var canvas = document.getElementById("game_canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  var countIt = 50.1
   var x7 = .18 * window.innerWidth; 
     var y7 = .35 * window.innerHeight;  
  setInterval(drawGame,1000);
  
  function drawGame() {
     drawGameBackground(ctx); 
     drawGameCountDown(ctx, countIt);
  }
  function drawGameBackground(ctx,countIt) { 
     var x4 = .08 * window.innerWidth;            // x pos of title
     var y4 = .10 * window.innerHeight;            // y pos of title
     var x5 = .08 * window.innerWidth;            // x pos of "MaxProfit"
     var y5 = y4 + .05 * window.innerHeight;     // y pos of "Max Profit"
     var i = 0;
     var x = .06 * window.innerWidth;            // start of line
     var x1 = .07 * window.innerWidth;          //start of separators
     var y1 = .5 * window.innerHeight;         // top of separators
     var y2 = y1 + .025 * window.innerHeight;  // bottom of separators
     var z = .015 * window.innerWidth;    // increment between separators
     var x2 = z * 21;                    // end of line
     var y = y1 + (.0125 * window.innerHeight); //midpoint of sep line
     var x6 = x1 - 5;                // x start of the second lables
     var y3 = y2 + (.0125 * window.innerHeight);  // y pos of sec labels
     var x7 = .18 * window.innerWidth;            // x pos of the counter
     var y7 = .35 * window.innerHeight;           // y position ofcounter
     var s;                                // second
     var x4 = .08 * window.innerWidth;        // x position of "GAME"
     var y4 = .10 * window.innerHeight;       // y position of "GAME"
     ctx.fillStyle = "#ffffff";
     ctx.fill();
     ctx.font = "35px Rock Salt";
     ctx.fillText("GAME", x4, y4);
     ctx.font = "15px Tahoma";
     ctx.fillText("Max Profit: 10 000 000 Coins", x5, y5);
     ctx.beginPath();
     ctx.moveTo(x,y);    
     ctx.lineTo(x2,y);
     ctx.lineWidth = .5;
     ctx.strokeStyle = "#000000";                                                                        
     ctx.lineWidth = 1;
     ctx.stroke();
     while (i < 17){
        s = i + 1;
        ctx.font = "10px Tahoma";
        ctx.fillText(s + "s", x6, y3);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x1,y2);
        x1 = x1 + z;
        x6 = x6 + z;
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 1;
        ctx.stroke();
        i++;
     }
  }
  function drawGameCountDown(ctx, countIt) {
         countIt = (countIt - .1).toFixed(1);
         ctx.fillStyle = "red";
         ctx.fill();
         ctx.font = "35px Tahoma";
         ctx.fillText(countIt, x7, y7);
  }

<canvas id ="game_canvas">
     'Your browser does not support the canvas element.'
 </canvas>