javascript – Canvas使用liniear渐变背景设置角度

2019年8月5日 200次阅读

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

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

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

如您所见,这是使用某个角度(-45deg)设置的.

有没有办法让我使用画布创建它,还能够从中创建包含此背景的图像？

这在手动设置css-background属性时不起作用,因为toDataURL没有考虑任何css.我也看过自己将它绘制到画布中,但是ctx.createLinearGradient不支持绘制角度.

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

最佳答案 抓取canvas元素的背景将不起作用,因为它不是画布位图的一部分(在这种情况下是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>
点赞