javascript - Canvas 使用带 Angular 线性渐变背景集

Question

我正在尝试创建一个 Canvas 对象，我可以使用它来创建图像(使用 canvas.toDataURL())。

这个 Canvas 的关键元素之一，必须是使用以下 css 设置的背景渐变:

背景:-webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 36%,#207cca 71%,#7db9e8 100%);。

如您所见，这是使用特定 Angular (-45deg) 设置的。

有没有什么方法可以让我使用 Canvas 创建这个并且还能够从中创建包含此背景的图像？

这在手动设置 css-background 属性时不起作用，因为 toDataURL 不考虑任何 css。我自己也考虑过将其绘制到 Canvas 中，但 ctx.createLinearGradient 不支持绘制 Angular 。

我怎样才能实现一个允许包含我想要的背景的 toDataURL 的 Canvas ？

Answer 1

抓取 Canvas 元素的背景将不起作用，因为它不是 Canvas 位图的一部分(在本例中为 2D 上下文)。

为此，您必须使用 createLinearGradient。如您所说，它不直接支持 Angular ，而是使用直线 (x1,y1)-(x2,y2) 创建渐变。

这意味着我们可以使用一点三 Angular 函数来产生我们想要的 Angular 。

如果你想以一定 Angular 创建一条线，只需执行以下操作:

var x2 = length * Math.cos(angle);  // angle in radians
var y2 = length * Math.sin(angle);  // angle in radians

现在您可以将其与 createLinearGradient 一起使用:

var gr = ctx.createLinearGradient(0, 0, x2, y2);

例子

var ctx = document.querySelector("canvas").getContext("2d"),
    angle = 45 * Math.PI / 180,
    x2 = 300 * Math.cos(angle),
    y2 = 300 * Math.sin(angle),
    gr = ctx.createLinearGradient(0, 0, x2, y2);

gr.addColorStop(0, "black");
gr.addColorStop(1, "blue");

ctx.fillStyle = gr;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

var uri = ctx.canvas.toDataURL();
console.log(uri);

<canvas></canvas>