我要在计数器开始工作之前将文本添加到计数器中。我可以使用当前代码添加它吗?在这段代码中,所有内容都由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();
答案 0 :(得分:0)
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();