Question

我使用画布中的笔划和路径制作两条线，我想要像波浪效果一样弯曲。而不是在Photoshop中创建实际图像来实现这一目标。

有人可以帮助获取如下图所示的曲线吗？

我还希望在最后获得直边的圆形曲线，这可能是笔划路径吗？

到目前为止我所拥有的：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

画布上的绘制曲线可以使用bezierCurveTo函数完成：

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（＆＃39; 2d＆＃39;）。一个就够了。

Answer 2

所以看看Developer Nodejs回答。我能够达到我想要的结果。

请看一下我的例子：

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: 150});

yellowWave(ctx, iWidth, iHeight, iMidWidth, iQuartWidth);
blueWave(ctx, iWidth, iHeight, iMidWidth, iQuartWidth);

console.log("Curved Lines."); 
  
}

function blueWave(ctx, width, height,
iMidWidth, iQuartWidth){
  var cp1 = iQuartWidth;
  var cp2 = -(height / 1);
  var cp3 = iMidWidth;
  var cp4 = height * 2.5;
  var endX = width;
  var endY = height / 4;
  ctx.lineWidth = 50;
  ctx.strokeStyle = '#284762';
  ctx.beginPath();
  ctx.moveTo(-20, 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 * 3.5;
  var endX = width + 50;
  var endY = height / 1.7;
  ctx.lineWidth = 40
  ctx.strokeStyle = '#efc833';
  ctx.beginPath();
  ctx.moveTo(-10, height - 10);
  ctx.bezierCurveTo(
    cp1, 
    cp2,
    cp3,
    cp4, 
    endX, 
    endY
  );


  ctx.lineCap = 'round';
  ctx.stroke();
  ctx.closePath();
}

Draw();

.wave {
  background-color: transparent;
}

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

帆布曲线

2 个答案: