画布使用liniear渐变背景设置一个角度

Question

我想创建一个画布对象，我可以用来创建一个图像（使用canvas.toDataURL()）。

一个这种帆布的关键要素，必须背景渐变使用以下的CSS设置：

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

正如你可以看到这一点使用一定的角度（-45deg)。

有什么办法，我创建这个用帆布，也能够从这种包括这样的背景下创建的图像设置？

手动设置CSS背景属性时，如toDataURL不考虑任何CSS这是行不通的。我也看着它画到画布自己，但ctx.createLinearGradient不支持的角度的图。

我怎样才能实现一个允许0的画布其中包含我想要的背景？

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>