Холст дуги и заправить градиент

Question

У меня есть следующий исходный код:

HTML:

<canvas id="main" width="500" height="500" style="border:1px solid black;"></canvas> 

JavaScript:

function myRnd(val) 
{ 
    return parseInt(Math.random() * val); 
} 

function rndCircles() { 
    var maxCircles = 30; 

    for (var r = 1; r <= maxCircles; r++) { 
     var c = document.getElementById("main"); 
     var x = myRnd(c.clientWidth); 
     var y = myRnd(c.clientHeight); 
     var radius = parseInt(Math.random() * 30); 

     var ctx = c.getContext("2d"); 
     // Create gradient 
     var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); 
     grd.addColorStop(0, 'rgb(' + myRnd(255) + ', ' + myRnd(255) + ',' + myRnd(255) + ')'); 
     grd.addColorStop(1, 'white'); 

     ctx.beginPath(); 

     ctx.arc(x, y, radius, 0, 2 * Math.PI,false); 
     // Fill with gradient 
     ctx.fillStyle = grd; 
     ctx.fill(); 
     ctx.lineWidth = 5; 
     //ctx.strokeStyle = '#003300'; 
     ctx.stroke(); 
    } 
} 

rndCircles(); 

Я не могу видеть каждую дугу, заполненную другой цвет/градиент на Chrome. Зачем? Я что-то упускаю?

Фидл здесь: https://jsfiddle.net/j9wst2yd/

Answer 1

градиент будет использовать начальное положение и радиус, когда определенно, что означает дугу дальше от он будет в конечном итоге превратить полностью белым (или любой внешний цвет был бы).

Вы можете решить это, используя перевод вместо положения для дуг.

Только несколько корректировок необходимы -

Создайте градиент, основанный вокруг начала координат (0, 0):

var grd = ctx.createRadialGradient(0, 0, 5, 0, 0, 100); 
// ... 

Затем замените установки дуги положения с переводом, здесь абсолютными используя setTransform() вместо (translate() будет накапливаться, что вынуждает вас впоследствии отменить перевод, что является более высокой стоимостью):

ctx.setTransform(1,0,0,1, x, y);    // two last = translation 
ctx.beginPath(); 
ctx.arc(0, 0, radius, 0, 2 * Math.PI,false); // draw at origin 

Для того, чтобы сбросить обратно к нормальному (единичной матрице) просто установить (0,0) для setTransform():

ctx.setTransform(1, 0, 0, 1, 0, 0); 

Регулировка по мере необходимости.

function myRnd(val) 
 
{ 
 
    return parseInt(Math.random() * val); 
 
} 
 
function rndCircles() { 
 
    var maxCircles = 30; 
 
\t var c = document.getElementById("main"); 
 
    var ctx = c.getContext("2d"); 
 
\t 
 
    for (var r = 1; r <= maxCircles; r++) { 
 
     var x = myRnd(c.clientWidth); 
 
     var y = myRnd(c.clientHeight); 
 
     var radius = parseInt(Math.random() * 30); 
 

 
\t \t var grd = ctx.createRadialGradient(0, 0, 5, 0, 0, radius); 
 
\t \t grd.addColorStop(0, 'rgb(' + myRnd(255) + ', ' + myRnd(255) + ',' + myRnd(255) + ')'); 
 
\t \t grd.addColorStop(1, 'white'); 
 
\t \t ctx.fillStyle = grd; 
 

 
     ctx.setTransform(1,0,0,1,x,y); 
 
\t  ctx.beginPath(); 
 
     ctx.arc(0, 0, radius, 0, 2 * Math.PI,false); 
 
     // Fill with gradient 
 
     ctx.fill(); 
 
     ctx.lineWidth = 5; 
 
     //ctx.strokeStyle = '#003300'; 
 
     ctx.stroke(); 
 
    } 
 
} 
 
rndCircles();

<canvas id="main" width="500" height="500" style="border:1px solid black;"></canvas>