Canvas jquery代码不调用第二个函数

我正在尝试创建一个从5.0到0的简单倒计时。我有两个功能-一个用于绘制背景，另一个用于显示倒计时。我是一个使用Canvas的初学者，所以我已经在w3u启动实用程序上对此进行了建模。我真的不明白它是如何工作的，但我假设时钟每秒钟被完全画一次，这也是我正在尝试做的。我成功地使用函数（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);
  }

“您的浏览器不支持画布元素。”
var canvas=document.getElementById（“游戏画布”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（'2d'）；
var countIt=50.1
设置间隔（抽签游戏，1000）；
函数drawGame（）{
drawGameBackground（ctx）；
drawGameCountDown（ctx，countIt）；
}
函数drawGameBackground（ctx，countIt）{
var x4=.08*window.innerWidth；//标题的x位置
变量y4=.10*window.innerHeight；//标题的y位置
var x5=.08*window.innerWidth；//“MaxProfit”的x位置
变量y5=y4+.05*window.innerHeight；//最大利润的y位置
var i=0；
var x=.06*window.innerWidth；//行的开头
var x1=.07*window.innerWidth；//分隔符的开始
变量y1=.5*window.innerHeight；//分隔符顶部
变量y2=y1+.025*window.innerHeight；//分隔符的底部
var z=.015*window.innerWidth；//分隔符之间的增量
var x2=z*21；//行尾
变量y=y1+（.0125*window.innerHeight）；//sep线的中点
var x6=x1-5；//x第二个标签的开头
变量y3=y2+（.0125*window.innerHeight）；//sec标签的y位置
var x7=.18*window.innerWidth；//计数器的x位置
变量y7=.35*window.innerHeight；//计数器的y位置
var s；//秒
var x4=.08*window.innerWidth；//游戏的x位置
变量y4=.10*window.innerHeight；//游戏的y位置
ctx.fillStyle=“#ffffff”；
ctx.fill（）；
ctx.font=“35px岩盐”；
ctx.fillText（“游戏”，x4，y4）；
ctx.font=“15px-Tahoma”；
ctx.fillText（“最大利润：10000枚硬币”，x5，y5）；
ctx.beginPath（）；
ctx.moveTo（x，y）；
ctx.lineTo（x2，y）；
ctx.lineWidth=.5；
ctx.strokeStyle=“#000000”；
ctx.lineWidth=1；
ctx.stroke（）；
而（i<17）{
s=i+1；
ctx.font=“10px-Tahoma”；
ctx.填充文本（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++；
}
}
函数drawGameCountDown（ctx，countIt）{
countIt=（countIt-.1）.toFixed（1）；
ctx.fillStyle=“#ffffff”；
ctx.fill（）；
ctx.font=“35px-Tahoma”；
ctx.fillText（countIt，x7，y7）；
}

---

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

我运行了你的代码，看看是否有任何错误。（使用chrome->devtool->console） 并发现

x7

和

y7

没有在

drawGameCountDown

中定义，因为它们只是生活在

drawGameBackground

功能范围内

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

一旦画布成功地绘制了这两个东西，那么您就可以使用

window.requestAnimationFrame（draw）创建一个新的框架并在其上放置下一个计数编号和背景

如MDN上的演示：

以下是显示其编号的固定代码段：
var canvas=document.getElementById（“游戏画布”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（'2d'）；
var countIt=50.1
var x7=.18*window.innerWidth；
变量y7=.35*window.innerHeight；
设置间隔（抽签游戏，1000）；
函数drawGame（）{
drawGameBackground（ctx）；
drawGameCountDown（ctx，countIt）；
}
函数drawGameBackground（ctx，countIt）{
var x4=.08*window.innerWidth；//标题的x位置
变量y4=.10*window.innerHeight；//标题的y位置
var x5=.08*window.innerWidth；//“MaxProfit”的x位置
变量y5=y4+.05*window.innerHeight；//最大利润的y位置
var i=0；
var x=.06*window.innerWidth；//行的开头
var x1=.07*window.innerWidth；//分隔符的开始
变量y1=.5*window.innerHeight；//分隔符顶部
变量y2=y1+.025*window.innerHeight；//分隔符的底部
var z=.015*window.innerWidth；//分隔符之间的增量
var x2=z*21；//行尾
变量y=y1+（.0125*window.innerHeight）；//sep线的中点
var x6=x1-5；//x第二个标签的开头
变量y3=y2+（.0125*window.innerHeight）；//sec标签的y位置
var x7=.18*window.innerWidth；//计数器的x位置
变量y7=.35*window.innerHeight；//计数器的y位置
var s；//秒
var x4=.08*window.innerWidth；//游戏的x位置
变量y4=.10*window.innerHeight；//游戏的y位置
ctx.fillStyle