iOS 14 上奇怪的 HTML Canvas 渲染问题 - 如在 iPhone 8 上所见答案

【问题标题】：Strange HTML Canvas rendering problem on iOS 14 - as seen on iPhone 8iOS 14 上奇怪的 HTML Canvas 渲染问题 - 如在 iPhone 8 上所见
【发布时间】：2021-02-21 03:58:42
【问题描述】：

我在使用 HTML Canvas “手工制作”的简单圆环图上遇到了一个奇怪的渲染问题。它从 iOS14 开始，我可以在我的 iPhone 8 上看到它。

我不知道其他设备是否有这个问题，从 chrome 开发工具和 iPhone 11 Pro 模拟器我没有。

https://codepen.io/emish89/pen/bGemWKN

const value = 50;
const circle = document.getElementById("victories-canvas"),
  context = circle.getContext("2d"),
  positionX = circle.width / 2,
  positionY = circle.height / 2,
  degrees = value * 3.6,
  circleRadius = 80,
  innerCircleRadius = 65,
  startAngle = (Math.PI / 180) * 270,
  endAngle = (Math.PI / 180) * (270 + degrees);

context.lineCap = "butt";
context.beginPath();
context.strokeStyle = "#000";
context.lineWidth = "15";
context.arc(positionX, positionY, circleRadius, startAngle, endAngle);
context.stroke();

context.beginPath();
context.arc(positionX, positionY, innerCircleRadius, 0, 2 * Math.PI);
context.fillStyle = "#D8FF53";
context.fill();

&lt;canvas id='victories-canvas' width='175' height='175' /&gt;

我在创建问题情境的地方附上了一支笔。如果 value（JS 中的第一行）高于 75，您就会开始看到奇怪的故障。（下图）

我测试了它，似乎与 circleRadius 属性有关，在 78 岁以下，在我的特殊情况下你没有问题。

我不知道我的代码中是否有我不理解的问题（但多年来一直运行良好）或其他原因。

非常感谢所有的贡献。

【问题讨论】：

那根本不是 SVG，那是 HTML Canvas。
对不起，我的标题有错，我已修复。是的，它绝对是 HTML 画布
我给你做了一个sn-p。在我的 PC Chrome 上看起来也很奇怪
真的吗？即使在 PC Chrome 上？什么价值观？因为我无法在 PC 上重现它。谢谢
提交错误报告，bugs.webkit.org 您的代码应该可以正常工作。现在，您是否可以尝试不让路径构建器完全转身，看看问题是否仍然存在？ codepen.io/_-0-_/pen/gOMBEqL

标签： html canvas html5-canvas ios14 iphone-8

【解决方案1】：

同样的问题。 ctx.arc 可能会遇到这个错误。

在这里演示： https://codepen.io/acery/pen/XWjdmbv

【讨论】：

您的回答与其说是一个答案，不如说是一个有用的评论。所以请在问题下方的评论中写下这个。