Question

我使用线性渐变在HTML画布上下文中绘制并重新绘制数百个（超过数千个）图标形状，每个图形形状都有自己独特的线性渐变。

创建后可以重复使用HTML画布上下文线性渐变吗？

如果是这样，你如何改变x1，y1，x2，y2和停止颜色？

或者你可以从上下文中删除线性渐变吗？

或者，如果以上都不是，那么任何其他画布功能是否可用，例如clearRect从其边界内的上下文中删除所有线性渐变？

或者如果没有这些，那么长时间内有数千（数十万？）线性渐变子项的上下文的性能损失是什么？

Answer 1

线性/径向渐变是通常作为context.strokeStyle或context.fillStyle值应用的对象，因此每次重新分配这些context属性时，前一个渐变（或颜色）都是丢弃。这里需要的是一种用于定义渐变的编程方法，它不需要过度重复的编码。

以下makeGradient函数将一个Object值作为参数，并应用它们返回所需的渐变类型。你可能会在你的项目中发现这样的东西。

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d");

function makeGradient(opts) {
    var grad = "linear" === opts.type ? 
        ctx.createLinearGradient(
            opts.dims.startX, opts.dims.startY, 
            opts.dims.endX, opts.dims.endY
        ) : ctx.createRadialGradient(
            opts.dims.startX, opts.dims.startY, 
            opts.dims.startR, opts.dims.endX, 
            opts.dims.endY, opts.dims.endR
        );
    opts.stops.forEach(function(n) {
        grad.addColorStop(n.stop, n.color);
    }); 
    return grad;
}

var options = {
    type: "linear",
    dims: {
        startX: 0,
        startY: 0,
        endX: 100,
        endY: 100
    },
    stops: [ 
        { stop: 0, color: "#F00" }, 
        { stop: .5, color: "#FF0" },
        { stop: 1, color: "#00F" }
    ]
};

ctx.fillStyle = makeGradient( options ), 
ctx.fillRect(0, 0, 100, 100);

现在可以修改/更新options对象，然后再次应用。 E.G ...

options.type = "radial";
options.dims = {
    startX: 160,
    startY: 50,
    startR: 2,
    endX: 160,
    endY: 50,
    endR: 50
};

ctx.fillStyle = makeGradient( options )
ctx.fillRect(110, 0, 100, 100);

JSFIDDLE

我希望这可能会有所帮助。 ;）

画布删除线性渐变

1 个答案: