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();

在柜台顶部添加文字

1 个答案: