javascript - Canvas 曲线

Question

我正在使用 Canvas 中的笔触和路径来制作两条线，我希望它们像波浪效果一样弯曲。而不是在 Photoshop 中创建实际图像来实现此目的。

谁能帮忙得到如下图所示的曲线？

我还想在末端实现圆 Angular 曲线到直边，这可以用笔划路径实现吗？

到目前为止我所拥有的:

(function($){
  var $canvas,
      fnInitWaves,
      fnDrawWave,
      tmrResize;
  
  fnDrawWave = function(canvas){
    var $this = $(canvas), $outer, iWidth, iHeight, iMidWidth, iQuartWidth, iLineWidth, iFillLineWidth, ctx, ctx1;
      
      $outer = $this.parent();
      
      iWidth = $outer.outerWidth();
      iHeight = $outer.outerHeight() - 30;
      iMidWidth = Math.floor(iWidth / 2);
      iQuartWidth = Math.floor(iMidWidth / 2);
      
      iLineWidth = 10;
      iFillLineWidth = 6;

      $this.attr({width: iWidth, height: 100});
      
      ctx = canvas.getContext('2d');
	  ctx1 = canvas.getContext('2d');
	  
      // Wave init
      ctx.lineWidth = iLineWidth;
      ctx.strokeStyle = '#284762';
      ctx.beginPath();
      ctx.moveTo(0, iHeight * 1);
	 
      // Wave peak
      ctx.quadraticCurveTo(iQuartWidth, -(iHeight / 2.5) + iLineWidth, iMidWidth, iHeight / 2.5);
	  
      // Wave valley
      ctx.quadraticCurveTo(iQuartWidth + iMidWidth, (iHeight * 1.5) - iLineWidth, iWidth, iHeight / 4);
	  
      // Wave end
      ctx.lineCap = 'round';
      ctx.stroke();
      ctx.closePath();
	 	  
	  // Wave init
      ctx1.lineWidth = iLineWidth;
      ctx1.strokeStyle = '#efc833';
      ctx1.beginPath();
      ctx1.moveTo(20, iHeight / 1);
	 	
	  ctx1.quadraticCurveTo(iQuartWidth, -(iHeight / 6) + iLineWidth, iMidWidth, iHeight / 2);
	  ctx1.quadraticCurveTo(iQuartWidth + iMidWidth, (iHeight * 1.5) - iLineWidth, iWidth, iHeight / 1.5);
	  
	  ctx1.lineCap = 'round';
      ctx1.stroke();
      ctx1.closePath();
  };
  
  fnInitWaves = function(){    
    $canvas.each(function(i, el){
      fnDrawWave(el);
    });
  };
  
  $(function(){
    $canvas = $('canvas.wave');
    fnInitWaves.apply(undefined);
  });
  
  $(window).on('resize', function(){
    clearTimeout(tmrResize);
    tmrResize = setTimeout(fnInitWaves, 250);
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wave-outer">
	<canvas class="wave" width="685" height="96"></canvas>  
</div>

Answer 1

可以使用 bezierCurveTo 函数在 Canvas 上绘制曲线:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(25, 100);
    ctx.bezierCurveTo(50, 200, 75, 50, 100, 100);
    ctx.stroke();
  }
}
draw()

更新的答案:

function Draw(){

canvas = document.getElementById("canvas")
ctx = canvas.getContext('2d');

var $this = $(canvas),$outer, iWidth, iHeight, iMidWidth, iQuartWidth, iLineWidth, iFillLineWidth;
$outer = $this.parent();   
iWidth = $outer.outerWidth();
iHeight = $outer.outerHeight() - 30;
iMidWidth = Math.floor(iWidth / 2);
iQuartWidth = Math.floor(iMidWidth / 2);  
iLineWidth = 10;
iFillLineWidth = 6;

iWidth = $outer.outerWidth();
iHeight = $outer.outerHeight() - 30;
$this.attr({width: iWidth, height: 100});

blueWave(ctx, iWidth, iHeight, iMidWidth, iQuartWidth);
yellowWave(ctx, iWidth, iHeight, iMidWidth, iQuartWidth);

console.log("Curved Lines."); 

}

function blueWave(ctx, width, height,
iMidWidth, iQuartWidth){
  var cp1 = iQuartWidth;
  var cp2 = -(height / 2.5);
  var cp3 = iMidWidth;
  var cp4 = height * 2.5;
  var endX = width;
  var endY = height / 4;
  ctx.lineWidth = 16;
  ctx.strokeStyle = '#284762';
  ctx.beginPath();
  ctx.moveTo(0, height);
  ctx.bezierCurveTo(
    cp1, 
    cp2,
    cp3,
    cp4, 
    endX, 
    endY
  );


  ctx.lineCap = 'round';
  ctx.stroke();
  ctx.closePath();
}

function yellowWave(ctx, width, height,
iMidWidth, iQuartWidth){
  var cp1 = iQuartWidth;
  var cp2 = -(height / 2.5);
  var cp3 = iMidWidth;
  var cp4 = height * 2.5;
  var endX = width;
  var endY = height / 3.25;
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#efc833';
  ctx.beginPath();
  ctx.moveTo(6, height + 10);
  ctx.bezierCurveTo(
    cp1, 
    cp2,
    cp3,
    cp4, 
    endX, 
    endY
  );


  ctx.lineCap = 'round';
  ctx.stroke();
  ctx.closePath();
}

Draw();

原始答案:http://jsbin.com/dejatihogo/edit?js

更新后的答案:https://jsbin.com/fopesacisa/1/edit?output

您的线条看起来弯曲或歪斜的主要问题是因为您使用二次曲线将两条曲线连接在一起。相反，请使用贝塞尔函数，这样您就可以在两个不同的控制点弯曲一条线。

此外，无需复制 getContext('2d')。一个就够了。