如何解决iOS 14上奇怪的HTML Canvas渲染问题-如在iPhone 8上看到的
在使用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,innerCircleRadius,2 * Math.PI);
context.fillStyle = "#D8FF53";
context.fill();
<canvas id='victories-canvas' width='175' height='175' />
我附上一支笔,以解决问题。如果值(JS中的第一行)高于 75 ,您将开始看到奇怪的故障。 (下图)
我对其进行了测试,并且似乎与 circleRadius 属性有关,在78岁以下的情况下,您在我的特定情况下没有问题。
我不知道我的代码中是否存在我不理解的错误(但是可以正常工作多年)或其他原因。
非常感谢您所做的所有贡献。
解决方法
同样的问题。 ctx.arc
可能会遇到此错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。