在柜台顶部添加文字

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'),

    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.fillText("test data....",10,50);

  c.stroke();

  degree+=4;

  if(degree === 360){

    degree = 0;

    count++;

  }

}

  animate();