HTML5帆布覆蓋透明漸變

Question

我創建在HTML5一個顏色選擇器如下面

梯度它由三個部分組成：

1. 固體紅色的背景色（必須是可變）
2. 從下到上的黑色透明漸變
3. 白色透明漸變從左到右

我設法創建了單個漸變和單個顏色，但我無法弄清楚如何將純色和兩個漸變疊加在一起。我怎樣才能做到這一點？

（我可以提供我的代碼，但它是非常通用的，不會是有用的）

Answer 1

您可以覆蓋兩個梯度彼此的頂部：

Fiddle demo

水平梯度

從白色到彩色（HUE度）你想用100％的飽和度和50％亮度使用方法：

var grH = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0); 
grH.addColorStop(0, '#fff'); 
grH.addColorStop(1, 'hsl(' + hue + ', 100%, 50%)'); 

ctx.fillStyle = grH; 
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

垂直

從黑底到頂部透明。

var grV = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height); 
grV.addColorStop(0, 'rgba(0,0,0,0)'); 
grV.addColorStop(1, '#000'); 

ctx.fillStyle = grV; 
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

結果

繪製水平第一，然後在頂部的垂直會導致這樣的：

正如demo很容易創建一個滑塊來更新色相調色板TE。您不需要像在演示中一樣重新創建黑色到透明的漸變 - 只需將其緩存到屏幕外的畫布並在每次更新時重新使用它，因爲這樣可以提供更多的性能。

希望這會有所幫助。

Answer 2

我不認爲顏色選擇器會使用你想出的方法是「正確的」。因爲白色的透明漸變會使左下角變白，但它應該是黑色的。

我在此基礎上創建了jsfiddleanswer。它仍然是傾斜的，但我認爲你可以算出來自己：

function draw(hue){ 
    var canvas = document.getElementById("hsl-square"); 
    var ctx = canvas.getContext('2d'); 
    for(row=0; row<=100; row++){ 
     var grad = ctx.createLinearGradient(0, 0, 100,0); 
     grad.addColorStop(0, 'hsl('+hue+', 0%, '+(row)+'%)'); 
     grad.addColorStop(1, 'hsl('+hue+', 100%, '+(row/2)+'%)'); 
     ctx.fillStyle=grad; 
     ctx.fillRect(0, row, 100, 1); 
     console.log(row, row/2); 
    } 
} 

draw(64); 

還有一個新的HTML5色彩輸入，在大多數現代瀏覽器的工作原理：http://jsfiddle.net/4FMJM/1/

<form> 
    Select color: <input type="color" name="your-color"> 
    <input type="submit"> 
</form>