HTML5畫布上的多個點/顏色漸變

我想在不同位置使用幾種不同顏色創建的漸變在html5畫布上填充圖形，如this picture。HTML5畫布上的多個點/顏色漸變

你對我如何做到這一點有什麼想法嗎？

2014-03-12 Christophe Le Besnerais

多一點信息可能是好的。你需要動畫嗎？改變它的大小？顏色和斑點是否會在運行時生成？你有什麼嘗試？爲什麼會使用背景？ – PhoneixS

我正在繪製一個voronoi圖，其中每個單元格都是不同的顏色，我希望每個單元格之間的過渡都是「平滑的」。它不需要動畫。顏色和斑點在運行時生成。理想情況下，如果我可以使用它就像一個徑向或線性漸變，將是完美的！ –

搜索一點點，我發現從Mozilla的開發網絡這個例子

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 

    var radgrad = ctx.createRadialGradient(0,0,1,0,0,150); 
    radgrad.addColorStop(0, '#A7D30C'); 
    radgrad.addColorStop(1, 'rgba(1,159,98,0)'); 

    var radgrad2 = ctx.createRadialGradient(0,150,1,0,150,150); 
    radgrad2.addColorStop(0, '#FF5F98'); 
    radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); 

    var radgrad3 = ctx.createRadialGradient(150,0,1,150,0,150); 
    radgrad3.addColorStop(0, '#00C9FF'); 
    radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); 

    var radgrad4 = ctx.createRadialGradient(150,150,1,150,150,150); 
    radgrad4.addColorStop(0, '#F4F201'); 
    radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); 

    ctx.fillStyle = radgrad4; 
    ctx.fillRect(0,0,150,150); 
    ctx.fillStyle = radgrad3; 
    ctx.fillRect(0,0,150,150); 
    ctx.fillStyle = radgrad2; 
    ctx.fillRect(0,0,150,150); 
    ctx.fillStyle = radgrad; 
    ctx.fillRect(0,0,150,150); 
}

基於INT這一點，你可以繪製每個單元爲徑向漸變，並使用一個總的透明色作爲它的最後一個步驟，因此融合更好與其他細胞。

沒有它，我認爲你需要根據每個單元格的距離來計算每個像素的顏色。

通常情況下，如果製作voronoi紋理時，將表面劃分成網格，然後爲每個頂點分配一個顏色，然後用形成其單元格的vertext的距離內插一個像素的顏色。

另見http://www.raymondhill.net/voronoi/rhill-voronoi.html在html5中實現真正的voronoi。它是開放源代碼並根據MIT許可證授權，因此您可以使用它。

來源

2014-03-12 15:42:07 PhoneixS

是的「疊加」多個徑向漸變（最終顏色完全透明）應該有所訣竅。 –

我不知道你需要什麼，但請記住，這不是你如何繪製一個voronoid，這是一種僞造類似於voronoid但較少努力的圖像的方法。此外，如果你認爲這回答你的問題，我會很高興被選中接受（直到出現一個新的更好的答案）;）。 – PhoneixS

是的，這是一種解決方法。如果有很多細胞，我也擔心表現會很差。每像素插值可能更好，但實現起來更復雜。我編輯了您的示例（請參閱我的原始帖子），以獲得與圖片中相似的結果。答案接受:) –

HTML5畫布上的多個點/顏色漸變

回答

相關問題