如何在HTML5畫布中顯示更平滑的漸變？

Question

我的網頁有一個html5畫布。 我只放了一個圖像和一個漸變。

帆布使用THIC JS代碼繪製自己：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.clearRect (0 , 0 , canvas.width, canvas.height); 
var img = document.getElementById("slika"); 
ctx.drawImage(img, 0, 0,canvas.width,canvas.height); 
var grd = ctx.createLinearGradient(x-400, 0, x, 0) 
grd.addColorStop(0.3,"hsla(360, 100%, 100%, 0)"); 
grd.addColorStop(1,"hsla(360, 100%, 100%, 0.8)"); 
ctx.fillStyle=grd; 
ctx.fillRect(0,0,canvas.width,canvas.height); 

ctx.font = "70px Arial"; 
ctx.fillStyle = "black" 
ctx.textAlign = "right"; 
ctx.fillText(textInput,canvas.width-50,canvas.height-120); 

當顯示，過渡不是很順暢，它只是開始的地方結束的地方。

它看起來像這樣：

我想過渡到更加順暢（我的意思不是更廣泛的梯度）。

有沒有辦法做到這一點？

感謝您的回答。

Answer 1

使用基於s斜率的梯度，可以使用緩出功能進行定義。這樣就平滑了平面和線性之間的過渡。您可能需要稍微補償寬度，因爲初始值和最終值比線性方法更接近平坦值。

例

var ctx = document.querySelector("canvas").getContext("2d"), img = new Image(); 
 
img.onload = function() { 
 

 
    // init canvas and image 
 
    ctx.canvas.width = this.naturalWidth; 
 
    ctx.canvas.height = this.naturalHeight; 
 
    ctx.drawImage(this, 0, 0); 
 
    
 
    // gradient using ease-in-out 
 
    var comp = 100; 
 
    var grd = ctx.createLinearGradient(550 - comp, 0, 700 + comp, 0); 
 
    
 
    for(var t = 0; t <= 1; t += 0.02) { // convert linear t to "easing" t: 
 
    grd.addColorStop(t, "hsla(360, 100%, 100%, " + easeInOut(t) * 0.8 + ")"); 
 
    } 
 
    
 
    ctx.fillStyle = grd; 
 
    ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height * 0.5); 
 

 
    // linear (as before) 
 
    var grd = ctx.createLinearGradient(550, 0, 700, 0); 
 
    grd.addColorStop(0, "hsla(360, 100%, 100%, 0)"); 
 
    grd.addColorStop(1, "hsla(360, 100%, 100%, 0.8)"); 
 
    ctx.fillStyle = grd; 
 
    ctx.fillRect(0,ctx.canvas.height * 0.5+1, ctx.canvas.width, ctx.canvas.height * 0.5); 
 
}; 
 

 
function easeInOut(t) {return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1} 
 

 
img.src = "//i.imgur.com/ESyzwQg.png";

canvas {width:100%; height:auto}

<canvas></canvas>

Answer 2

如果通過「更平滑」，你的意思是漸漸過渡，那麼你需要調整你的顏色停止。你不需要調整漸變的寬度來做到這一點。

grd.addColorStop(0.3,"hsla(360, 100%, 100%, 0)"); 
grd.addColorStop(1,"hsla(360, 100%, 100%, 0.8)"); 

眼下，那些停止受此帶動，所以你從左邊0阿爾法〜30％，這是你在你的alpha通道跳轉到2.8，如果你想這對移動感覺更漸進，然後（取決於你想要的效果），你應該調整這些停止。

grd.addColorStop(0.0,"hsla(360, 100%, 100%, 0)"); 
grd.addColorStop(1,"hsla(360, 100%, 100%, 0.8)"); 

這將更加流暢，您可以根據需要減少alpha。再次，它真的取決於您在漸變疊加中尋找的效果。