如何在HTML5画布中显示更平滑的渐变？

Question

我的网页中有一个html5画布。 我只放入了图像和渐变。

Canvas使用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 alpha移至30％，这就是您在alpha通道中跳到.8的位置，如果您希望这种感觉逐渐，那么（取决于根据您想要的效果），您应该调整这些光阑。

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

这样会更加流畅，您可以根据需要减小Alpha值。 同样，这实际上取决于您要在渐变叠加层上寻求的效果。