如何在HTML5 canvas中显示更平滑的渐变？ [英] How to display a smoother gradient in HTML5 canvas?

问题描述

我在我的网页上有一个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）; 
  

当显示时，转换不是很顺利，它只是从某处开始， / p>

看起来像这样：

我希望转换更流畅

感谢您的回答。

解决方案

使用可以使用ease-in-out函数定义的基于s-slope的渐变。这样，平坦和线性之间的过渡被平滑。您可能需要对宽度进行一些补偿，因为初始值和最终值比线性方法更接近平面值。

示例

  var ctx = document.querySelector（canvas）。getContext（2d），img = new Image（）; img.onload = function和图像ctx.canvas.width = this.naturalWidth; ctx.canvas.height = this.naturalHeight; ctx.drawImage（this，0，0）; // gradient使用ease-in-out var comp = 100; var grd = ctx.createLinearGradient（550  -  comp，0，700 + comp，0）;对于（var t = 0; t <= 1; t + = 0.02）{//将线性t转换为缓动t：grd.addColorStop（t，hsla（360,100％，100％ （t）* 0.8 +））; } ctx.fillStyle = grd; ctx.fillRect（0,0，ctx.canvas.width，ctx.canvas.height * 0.5）; // linear（as previous）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& 4 * t * t * t：（t-1）*（2 * t-2）*（2 * t-2）+1} img.src =http://i.imgur.com/ESyzwQg.png ;  

  canvas {width：100％ height：auto}  

 < canvas>< / canvas> ;  

I have a html5 canvas in my web page. I have only put an image and a gradient in it.

Canvas uses thic JS code to draw itself:

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);

When it displays, the transition isn't very smooth, it just starts somewhere and ends somewhere.

It looks like this:

I would like the transition to be smoother(I don't mean a wider gradient).

Is there any way to do that?

Thanks for answering.

解决方案

Use a s-slope based gradient which could be defined using an ease-in-out function. This way the transition between flat and linear is smoothed out. You may need to compensate a little on the width as initial and final values are closer to the flat values than in the linear approach.

Example

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 = "http://i.imgur.com/ESyzwQg.png";

canvas {width:100%; height:auto}

<canvas></canvas>

这篇关于如何在HTML5 canvas中显示更平滑的渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！