Firefox и Radialgradient (используя холст html5) - PullRequest
Новая
       33

Firefox и Radialgradient (используя холст html5)

6 голосов
/ 26 декабря 2011

По какой-то причине мой firefox не показывает радиальный градиент при использовании Canvas, кто-нибудь знает почему? (У меня нет этой проблемы на других компьютерах)

Вот часть кода, который я использую: 

var canvas = document.getElementById ( "layer2" ) ; 
var context = canvas.getContext ( "2d" ) ;   
var radgrad2 = context.createRadialGradient( x, y, 15 ,x-30,y-60, 0);
radgrad2.addColorStop(0, aux.color , .5);
radgrad2.addColorStop(0.75, "#ffffff" , .5 );
radgrad2.addColorStop( .5, "#ffffff" , .5);
context.fillStyle = radgrad2;

ps: у меня есть эта проблема только в Firefox (она обновлена)

Ответы [ 3 ]

0 голосов
/ 01 апреля 2012

После поисков в течение нескольких месяцев у меня теперь есть ответ на этот неуловимый вопрос.Mozilla изменила работу своих радиальных градиентов.Чтобы создать простой радиальный градиент, вам больше не нужно создавать путь.Вы просто заполняете прямоугольник вместо этого.Ниже приведен пример кода: 

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);

Этот метод невероятно эффективнее, чем создание путей с радиальным градиентом.Хотя я также вижу, что этот метод немного ограничивает разработчиков.Посмотрите этот пример из сети разработчиков Mozilla для лучшего примера: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

0 голосов
/ 10 октября 2014

Я обнаружил странную проблему в Firefox с SVG и radialGradients. Если я определяю заливку в CSS-классе и встраиваю CSS в документ, он работает нормально, однако, если я перемещаю CSS в отдельный файл и использую тег «link» для включения CSS, тогда radialGradient не работает. Это похоже на ошибку в Firefox, так как он работает в Chrome, Safari, Opera и даже IE, но не в Firefox.

0 голосов
/ 26 декабря 2011

Я не уверен, но если этот код работает на других компьютерах под FireFox, возможно, у вас старая версия браузера FireFox или вызывается document.getElementById перед загрузкой тега cavas с идентификатором «layer2». Другая проблема, которую я заметил, заключалась в том, что вы используете числа с плавающей запятой без нуля в начале. Например 0,5 вместо 0,5. Что происходит, когда вы запускаете этот код? 

window.addEventListener("load", function() {
            var canvas = document.getElementById ( "layer2" ) ; 
            if(!canvas.getContext) {
                alert("Your browser don't support canvas.");
            throw new Error("Your browser don't support canvas.");  
            }
            var context = canvas.getContext ( "2d" ) ;   
            var radgrad2 = context.createRadialGradient( x, y, 15 ,x-30,y-60, 0);
            radgrad2.addColorStop(0, aux.color , 0.5);
            radgrad2.addColorStop(0.75, "#ffffff" , 0.5 );
            radgrad2.addColorStop(0.5, "#ffffff" , 0.5);
            context.fillStyle = radgrad2;

}, false);
...