画布弧形功能在 Safari 中设置阴影和渐变时闪烁

Question

当我重新绘制弧线时，画布会在 safari 中闪烁。但是当我删除阴影或渐变时，它工作正常。 这是代码。

var ctx = document.querySelector('canvas').getContext('2d');
var angle = 0;
setInterval(function () {
if (++angle > 360) {
angle = 1;
}
draw(angle);
}, 30);
function draw(angle) {
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.lineWidth = 3;
// shadow
ctx.shadowBlur = 20;
ctx.shadowColor = 'yellow';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
// gradient
var grd = ctx.createLinearGradient(100, 0, 100, 100);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
ctx.strokeStyle = grd;
ctx.arc(100, 100, 80, 0, Math.PI / 180 * angle);
ctx.stroke();
ctx.closePath();
}

<canvas width="200" height="200"></canvas>

这是我的野生动物园版本

Mac
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15"
iPhone
Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1

Answer 1

一个很长的错误。你可以通过首先绘制一个没有渐变的阴影来克服它，顶部是一个没有阴影的渐变：

var ctx = document.querySelector('canvas').getContext('2d');
var angle = 0;
setInterval(function () {
if (++angle > 360) {
angle = 1;
}
draw(angle);
}, 30);
function draw(angle) {
ctx.clearRect(0, 0, 200, 200);
ctx.lineWidth = 3;
// shadow without a gradient
ctx.strokeStyle = 'yellow';
ctx.shadowBlur = 20;
ctx.shadowColor = 'yellow';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI / 180 * angle);
ctx.stroke();
ctx.closePath();
// gradient without a shadow
ctx.shadowBlur = 0;
var grd = ctx.createLinearGradient(100, 0, 100, 100);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
ctx.strokeStyle = grd;
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI / 180 * angle);
ctx.stroke();
ctx.closePath();
}

<canvas width="200" height="200"></canvas>