使用线性渐变背景的画布设置角度

Question

我正在尝试创建一个画布对象，以便可以使用canvas.toDataURL()从中创建图像。

其中一个关键元素是使用以下CSS设置的背景渐变:

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

正如您所看到的，这是使用特定角度（-45deg）设置的。

是否有任何办法可以使用画布创建此效果，并且还能够从中创建包含此背景的图像？

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

如何实现允许toDataURL的画布，其中包括我想要的背景？

- Matthijs

Answer 1

抓取画布元素的背景不起作用，因为它不是画布位图（在这种情况下是2D上下文）的一部分。您必须使用createLinearGradient来实现。正如您所说，它不直接支持角度，但创建一个使用线（x1，y1）-（x2，y2）的渐变。

这意味着我们可以使用一些三角学来产生我们想要的角度。

如果您想以某个角度创建一条线，请执行以下操作：

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>

- user1693593

---

我印象非常深刻。这正是我正在寻找的，非常感谢！ - Matthijs