如何在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。再次，它真的取决于您在渐变叠加中寻找的效果。