Canvas — createRadialGradient() не работает должным образом в Chrome v65

При использовании context.createRadialGradient() на 2d context градиент не отображается должным образом в Chrome v65.

Снимок экрана

Пример выше взят из MDN, но он также происходит в в моем собственном коде.

Градиент отлично работает в Firefox v59, Safari v11. В Opera v52 это не работает, так что, может быть, это новая ошибка в webkit? Я тестировал это на двух разных компьютерах, поэтому в моей локальной настройке не должно быть причин.

Кто-нибудь еще сталкивался с этой ошибкой или еще лучше знает, как ее исправить?

EDIT: найден открытая проблема в Chromium здесь. По-видимому, это непостоянная ошибка, и ее следует исправить в v66, если Я правильно читаю комментарии.


person Laust Deleuran    schedule 04.04.2018    source источник
comment
Работает на версии Android и на моих macOS без сетчатки. Но в любом случае, код на странице MDN должен работать нормально, поэтому проверьте iglf, есть ли существующий отчет об ошибке в системе отслеживания проблем хрома, и если нет, откройте его, указав свои спецификации.   -  person Kaiido    schedule 04.04.2018
comment
Я обнаружил открытый Проблема Chromium. Очевидно, это не совсем постоянная ошибка, и она должна быть исправлена ​​в v66. У меня это происходит как в обычном Chrome, так и в Chrome для инкогнито и Opera.   -  person Laust Deleuran    schedule 04.04.2018


Ответы (1)


Как упоминалось в сообщении выше, существует проблема в Chromium v65. Это все должно быть исправлено в v66.

Если вам нужно исправить это прямо сейчас, хакерский способ — убедиться, что градиент не получает идентичные аргументы x и y для первого и второго круга:

var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works

Вы можете увидеть действующее исправление здесь. Удачного взлома!

person Laust Deleuran    schedule 04.04.2018