HTML5画布多圆问题
HTML5画布多圆问题
提问于 2018-08-07 00:54:26
我的代码显示了一个带有%值的圆圈，我尝试在它旁边添加另一个圆圈，这个圆圈显示了另一个%值。
为此，我尝试添加另一个调用第二个ID my_canvas2的JS代码，但结果是一个带有递增%值的圆圈，没有结尾。
var ctx = document.getElementById('my_canvas1').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
function progressSim() {
diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 7;
ctx.fillStyle = '#09F';
ctx.strokeStyle = "#09F";
ctx.textAlign = 'center';
ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
ctx.beginPath();
ctx.arc(80, 80, 70, start, diff / 10 + start, false);
ctx.stroke();
if (al >= 65) {
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 25);<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
我见过一些相似的主题，问题是第一个圆圈的闭合路径，我试过了，仍然是同样的问题。谢谢你的帮助。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-07 03:22:07
尝尝这个。
function progressSim(ctx, al, start) {
let cw = ctx.canvas.width;
let ch = ctx.canvas.height;
let diff;
diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 7;
ctx.fillStyle = '#09F';
ctx.strokeStyle = "#09F";
ctx.textAlign = 'center';
ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
ctx.beginPath();
ctx.arc(80, 80, 70, start, diff / 10 + start, false);
ctx.stroke();
}
function startProgress(canvas_id, progress_int_1, stop_at) {
let ctx = document.getElementById(canvas_id).getContext('2d');
// let start = 4.72;
let al = progress_int_1;
let start = 4.72;
var sim = setInterval(function(){
progressSim(ctx, al, start);
al++;
if (al >= stop_at) {
clearTimeout(sim);
}
}, 25);
}
var progress_int_1 = 0;
var progress_int_2 = 0;
var sim1;
var sim2;
sim1 = startProgress('my_canvas1', progress_int_1, 50);
sim2 = startProgress('my_canvas2', progress_int_2, 80);<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
Stack Overflow用户
发布于 2018-08-07 06:17:17
如果你想复制这个功能，你需要隔离你的变量。这使您可以拥有没有冲突的代码。
这个函数有两个参数，画布的ID，以及你想要显示的百分比。diff和start是局部变量，不需要在两次调用之间持久化。
function progressSim(id, percent) {
var ctx = document.getElementById(id).getContext('2d'),
cw = ctx.canvas.width,
ch = ctx.canvas.height,
al = 0,
sim = setInterval(progress, 25);
function progress() {
var start = 4.72,
diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 7;
ctx.fillStyle = '#09F';
ctx.strokeStyle = "#09F";
ctx.textAlign = 'center';
ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
ctx.beginPath();
ctx.arc(80, 80, 70, start, diff / 10 + start, false);
ctx.stroke();
if (al >= percent) {
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
};
}
progressSim('my_canvas1', 65);
progressSim('my_canvas2', 80);<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
Stack Overflow用户
发布于 2018-08-07 02:40:12
非常简单的解决方案，我刚刚复制了你的代码，并对它进行了查找和替换，这样它就可以用于my_canvas2
var ctx = document.getElementById('my_canvas1').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
function progressSim() {
diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 7;
ctx.fillStyle = '#09F';
ctx.strokeStyle = "#09F";
ctx.textAlign = 'center';
ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
ctx.beginPath();
ctx.arc(80, 80, 70, start, diff / 10 + start, false);
ctx.stroke();
if (al >= 65) {
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 25);
var ctx2 = document.getElementById('my_canvas2').getContext('2d');
var al2 = 0;
var start2 = 4.72;
var cw2 = ctx2.canvas.width;
var ch2 = ctx2.canvas.height;
var diff2;
function progresssim2() {
diff2 = ((al2 / 100) * Math.PI * 2 * 10).toFixed(2);
ctx2.clearRect(0, 0, cw2, ch2);
ctx2.lineWidth = 7;
ctx2.fillStyle = '#09F';
ctx2.strokeStyle = "#09F";
ctx2.textal2ign = 'center';
ctx2.fillText(al2 + '%', cw2 * .5, ch2 * .5 + 2, cw2);
ctx2.beginPath();
ctx2.arc(80, 80, 70, start2, diff2 / 10 + start2, false);
ctx2.stroke();
if (al2 >= 45) {
clearTimeout(sim2);
// Add scripting here that will run when progress completes
}
al2++;
}
var sim2 = setInterval(progresssim2, 25);<canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
<canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas>
这里的其他人可能有一个更好的解决方案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51712365
复制相关文章
相似问题