#html #canvas #html5-canvas #ios14 #iphone-8
#HTML #холст #html5-холст #ios14 #iphone-8
Вопрос:
У меня странная проблема рендеринга на простой диаграмме пончиков, «сделанной вручную» с помощью HTML Canvas. Это началось с iOS14, и я вижу это на своем iPhone 8.
Я не знаю, есть ли у какого-либо другого устройства эта проблема, из chrome dev tools и из iPhone 11 Pro simulator, которых у меня не было.
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(); <canvas id='victories-canvas' width='175' height='175' /> Я прикрепляю ручку, в которой я создал ситуацию с проблемой. Если значение (первая строка в JS) превышает 75, вы начинаете видеть странные сбои. (изображения ниже)
Я протестировал это и, похоже, связано со свойством circleRadius, под 78 у вас нет проблемы в моем конкретном случае.
Я не знаю, что-то не так в моем коде, чего я не понимаю (но он работал нормально в течение многих лет) или что-то еще.
Большое спасибо за все вклады.
Комментарии:
1. Это вообще не SVG, это HTML Canvas.
2. извините, моя ошибка в названии, я исправил. Да, это определенно HTML-холст
3. Я сделал вам фрагмент. На моем компьютере Chrome тоже выглядит странно
4. Действительно? Даже на ПК Chrome? Какие значения? Потому что я не могу воспроизвести его на ПК. Спасибо
5. Отправьте отчет об ошибке, ошибки. webkit.org Ваш код должен работать нормально. Теперь, можете ли вы попробовать, не заставляя построитель пути совершать полный оборот, чтобы увидеть, сохраняется ли проблема? codepen.io/_-0-_/pen/gOMBEqL
Ответ №1:
Та же проблема. ctx.arc может возникнуть эта ошибка.
демонстрация здесь: https://codepen.io/acery/pen/XWjdmbv
Комментарии:
1. Ваш ответ — скорее полезный комментарий, чем ответ. Поэтому, пожалуйста, напишите об этом в будущем в комментарии под вопросом.