Несколько холстов, многоразовые градиенты

Question

Я пытаюсь написать сухой код для нескольких холстов. Я применяю градиенты к диаграммам диаграмм и не хочу переписывать один и тот же градиент для каждого экземпляра диаграммы.

var ctx1 = $("#SoftwareChart").get(0).getContext("2d"); 
var ctx2 = $("#WebChart").get(0).getContext("2d"); 

var gradient1 = ctx1.createLinearGradient(0, 0, 0, 400); 
gradient1.addColorStop(0, '#ff9170'); 
gradient1.addColorStop(1, '#ff3f05'); 

var gradient2 = ctx1.createLinearGradient(0, 0, 0, 400); 
gradient3.addColorStop(0, '#f5d147'); 
gradient3.addColorStop(1, '#dfb30c'); 

var gradient1 = ctx2.createLinearGradient(0, 0, 0, 400); 
gradient1.addColorStop(0, '#ff9170'); 
gradient1.addColorStop(1, '#ff3f05'); 

var gradient2 = ctx2.createLinearGradient(0, 0, 0, 400); 
gradient3.addColorStop(0, '#f5d147'); 
gradient3.addColorStop(1, '#dfb30c'); 

Как вы можете видеть, это не очень сухо, и я ненавижу его. Есть ли способ .getContext на всем холсте, который я хочу использовать, и применять градиенты ко всем им сразу?

Answer 1

Последний раз, когда я использовал chart.js, у меня было 17 разных диаграмм для создания.

До тех пор, как вы можете легко захватить все ваши canvas тегов, вы можете добавить их все в массив объектов, как это:

//Get array of all canvases on the DOM 
var chartCount = $('canvas').length; 

for (var i = 1; i < chartCount; i++) { 
    //Get DOM element of canvas 
    var el = $('chart').get(i); 

    //Add new entry to canvas array with DOM element and canvas context 
    canvas[i] = { 
     'DOM_Element': el, 
     'context': el.getContext('2d') 
    }; 
} 

Тогда каждый контекст холста можно ссылаться с чем-то вроде canvas[x]['context'].

После этого вы можете написать функцию для циклического перемещения всех элементов массива холста, добавляя градиенты по желанию.