多个 canvas，可重复使用的渐变

Question

我正在尝试为多个 canvas 编写干代码。我正在将渐变应用于 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');

如你所见，这不是很干，我讨厌它。有没有办法在我想使用的所有 canvas 上使用 .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 上下文都可以用 canvas[x]['context'].

之类的东西引用

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

多个 canvas，可重复使用的渐变

Multiple canvas, reusable gradients

jquery

canvas

chart.js