画布使用带有角度的线性渐变背景集

Canvas to use liniear gradient background set with an angle

本文关键字：线性 渐变 背景 布使用      更新时间：2023-09-26

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

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

CCD_ 2。

正如您所看到的，这是使用某个角度设置的（-45deg).

有没有什么方法可以让我用画布来创建这个，也可以从中创建一个包括这个背景的图像？

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

如何实现一个允许toDataURL包含我想要的背景的画布？

抓取画布元素的背景将不起作用，因为它不是画布位图（本例中为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>

相关文章：