畫布使用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>