多画布，可重复使用的渐变

Question

我正在尝试为多个画布编写干代码。我将渐变应用于chartjs图表，并且不希望为每个图表实例重写相同的渐变。

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']引用。

然后，您可以编写一个函数来循环遍历画布数组中的所有条目，并根据需要添加渐变。