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

等引用每个画布上下文

然后你可以编写一个函数来遍历canvas数组中所有的entires，根据需要添加渐变。

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

1 个答案: