在柜台顶部添加文字

Question

我想在计数器开始工作之前将文本添加到计数器中。我可以使用当前代码添加它吗？在这段代码中，所有内容都由JavaScript控制。我无法自定义:(。

任何帮助，将不胜感激 ！

HTML：

<canvas id="canvas"></canvas>

JS：

let canvas = document.getElementById('canvas'),

    degree = 0,

    countD = ['3', '2', '1', "Go!"],

    count = 0;

canvas.height = 344;

canvas.width = 344;

let c = canvas.getContext('2d');

let degreeToRadian = function(degree){

  return (degree*22)/(180*7);

}

let animate = function(){

  if(count<3){

    requestAnimationFrame(animate);

  }

  c.clearRect(0, 0, canvas.width, canvas.height);

  c.beginPath();

  /* border alignment*/

  c.arc(170, 170, 150, degreeToRadian(-90), degreeToRadian(degree));

  c.shadowBlur = 15;

  c.shadowColor = "red";

  c.strokeStyle="white";

  c.lineWidth = 10;

  c.stroke();

  c.beginPath();

  /* Text alignment */

  c.strokeText(countD[count], 170, 215);

  c.lineWidth = 0;

  c.font = "120px NeonTubes2Regular";

  c.textAlign = "center";

  c.stroke();

  degree+=4;

  if(degree === 360){

    degree = 0;

    count++;

  }

} animate();

Answer 1

let canvas = document.getElementById('canvas'),&nbsp; &nbsp; degree = 0,&nbsp; &nbsp; countD = ['3', '2', '1', "Go!"],&nbsp; &nbsp; count = 0;canvas.height = 344;canvas.width = 344;let c = canvas.getContext('2d');let degreeToRadian = function(degree){&nbsp; return (degree*22)/(180*7);}let animate = function(){&nbsp; if(count<3){&nbsp; &nbsp; requestAnimationFrame(animate);&nbsp; }&nbsp; c.clearRect(0, 0, canvas.width, canvas.height);&nbsp; c.beginPath();&nbsp; /* border alignment*/&nbsp; c.arc(170, 170, 150, degreeToRadian(-90), degreeToRadian(degree));&nbsp; c.shadowBlur = 15;&nbsp; c.shadowColor = "red";&nbsp; c.strokeStyle="white";&nbsp; c.lineWidth = 10;&nbsp; c.stroke();&nbsp; c.beginPath();&nbsp; /* Text alignment */&nbsp; c.strokeText(countD[count], 170, 215);&nbsp; c.lineWidth = 0;&nbsp; c.font = "120px NeonTubes2Regular";&nbsp; c.textAlign = "center";&nbsp; c.fillText("test data....",10,50);&nbsp; c.stroke();&nbsp; degree+=4;&nbsp; if(degree === 360){&nbsp; &nbsp; degree = 0;&nbsp; &nbsp; count++;&nbsp; }}&nbsp; animate();