Fiddle, 我试图将其缩小到重要的范围。我有一个 272 度的 Canvas 弧度,并带有偏移量。当绿色动画弧度达到 135 度时,在 Chrome 和其他浏览器中看起来像这样:
通常输入的值不会完全一样,所以它会很快跳过故障。但如果我能完全摆脱它,那将是非常了不起的。我对 Canvas 还很陌生,不知道该尝试什么。谢谢!!
相关JS:
function setGauge(valForGauge, val, distance){
var time = 500;
time = time / (Math.abs(valForGauge - preValForGauge));
if (valForGauge > preValForGauge) {
var animate = setInterval(function(){
if (preValForGauge == valForGauge)
clearInterval(animate);
else {
preValForGauge++;
drawValueArc(preValForGauge);
}
}, time);
} else if (valForGauge < preValForGauge) {
var animate2 = setInterval(function(){
if (preValForGauge == valForGauge)
clearInterval(animate2);
else {
preValForGauge--;
drawValueArc(preValForGauge);
}
}, time);
} else if (valForGauge == 0 || valForGauge == preValForGauge) {
preVal = val;
}
}
function drawValueArc(val) {
drawArc(ctx2, 57, 32, "rgb(230, 230, 230)", startRadians, endRadians);
drawArc(ctx2, 57, 31, "#27AE60", startRadians, val);
}
function drawArc(ctx, radius, width, color, start, end) {
ctx.beginPath();
ctx.arc(cx, cy, radius, (startRadians + offset) * deg2rad, (end + offset) * deg2rad, false);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
最佳答案
这显然是 Chrome(和 Canary)实现的一个错误。如果在 FireFox (Aurora) 中工作正常。在 Safari 中它很好(尽管它花了一年时间来制作它的动画)。 Opera 也能正常工作。
您应该从浏览器向 Google 报告错误(方法如下):
https://support.google.com/chrome/answer/95315?hl=en
您可以尝试使用此解决方案作为解决方法:
var deg2rad = Math.PI / 180.001; //179.999
更新的 fiddle 包括。解决方法:
http://jsfiddle.net/AbdiasSoftware/6ppDK/6/
Chrome 中的 arc 方法有很多问题,有些可能相关也可能不相关:
https://code.google.com/p/chromium/issues/detail?id=245233
https://code.google.com/p/chromium/issues/detail?id=243996
http://www.twiddla.com/test/ChromeCanvas.html
关于javascript - 为什么我的 Canvas 动画弧在中点出现故障?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17557980/