Javascript 帆布曲线

我用画布上的笔划和路径画了两条线，我想画成波浪效果的曲线。而不是在Photoshop中创建实际图像来实现这一点

有人能帮我得到下面的示例图片中的曲线吗

我还想实现末端直边的圆角曲线，笔划路径是否可行

到目前为止，我所拥有的：

（函数（$）{
var$canvas，
fnInitWaves，
在波浪中，
tMResize；
fnDrawWave=函数（画布）{
变量$this=$（画布），$outer、iWidth、iHeight、iMidWidth、iqartwidth、iLineWidth、iFillLineWidth、ctx、ctx1；
$outer=$this.parent（）；
iWidth=$outer.outerWidth（）；
iHeight=$outer.outerHeight（）-30；
iMidWidth=数学楼层（iWidth/2）；
iQuartWidth=数学楼层（iMidWidth/2）；
i宽度=10；
iFillLineWidth=6；
$this.attr（{宽度：iWidth，高度：100}）；
ctx=canvas.getContext（'2d'）；
ctx1=canvas.getContext（'2d'）；
//波动初始
ctx.lineWidth=iLineWidth；
ctx.strokeStyle='#284762'；
ctx.beginPath（）；
ctx.moveTo（0，iHeight*1）；
//波峰
ctx.四次曲线（半宽，-（iHweight/2.5）+直线宽度，iMidWidth，iHweight/2.5）；
//波谷
ctx.四次曲线（iQuartWidth+iMidWidth，（iHweight*1.5）-直线宽度，iWidth，iHweight/4）；
//波端
ctx.lineCap='圆形'；
ctx.stroke（）；
ctx.closePath（）；
//波动初始
ctx1.lineWidth=直线宽度；
ctx1.strokeStyle='#efc833'；
ctx1.beginPath（）；
ctx1.moveTo（20，iHeight/1）；
ctx1.四次曲线（i宽，-（ihweight/6）+直线宽度，iMidWidth，ihweight/2）；
ctx1.二次曲线（iQuartWidth+iMidWidth，（ihweight*1.5）-直线宽度，iWidth，ihweight/1.5）；
ctx1.lineCap=‘圆形’；
ctx1.stroke（）；
ctx1.closePath（）；
};
fnInitWaves=函数（）{
$canvas.每个（功能（i，el）{
fn波（el）；
});
};
$（函数（）{
$canvas=$（'canvas.wave'）；
fnInitWaves.apply（未定义）；
});
$（窗口）.on（'resize'，function（））{
clearTimeout（tmrResize）；
tmrResize=setTimeout（fnInitWaves，250）；
});
})（jQuery）
可以使用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();

原始答复：

最新答复：

线条看起来弯曲或扭曲的主要原因是使用二次曲线将两条曲线连接在一起。相反，请使用贝塞尔函数，以便可以在两个不同的控制点弯曲一条线

另外，不需要复制getContext（'2d'）。一个就够了。
看看答案。我能够达到我想要的结果

请看我的例子：


函数绘图（）{
canvas=document.getElementById（“canvas”）
ctx=canvas.getContext（'2d'）；
var$this=$（画布），$outer、iWidth、iHeight、iMidWidth、iqartwidth、iLineWidth、iFillLineWidth；
$outer=$this.parent（）；
iWidth=$outer.outerWidth（）；
iHeight=$outer.outerHeight（）-30；
iMidWidth=数学楼层（iWidth/2）；
iQuartWidth=数学楼层（iMidWidth/2）；
i宽度=10；
iFillLineWidth=6；
iWidth=$outer.outerWidth（）；
iHeight=$outer.outerHeight（）-30；
$this.attr（{宽度：iWidth，高度：150}）；
黄波（ctx、iWidth、iHeight、iMidWidth、iQuartWidth）；
蓝波（ctx、iWidth、iHeight、iMidWidth、iQuartWidth）；
原木（“曲线”）；
}
功能蓝波（ctx、宽度、高度、，
iMidWidth，iQuartWidth）{
var cp1=宽度；
变量cp2=-（高度/1）；
var cp3=iMidWidth；
var cp4=高度*2.5；
var endX=宽度；
var endY=高度/4；
ctx.lineWidth=50；
ctx.strokeStyle='#284762'；
ctx.beginPath（）；
ctx.moveTo（-20，高度）；
ctx.bezierCurveTo(
cp1，
cp2，
cp3，
cp4，
endX，
恩迪
);
ctx.lineCap='圆形'；
ctx.stroke（）；
ctx.closePath（）；
}
功能黄波（ctx、宽度、高度、，
iMidWidth，iQuartWidth）{
var cp1=宽度；
var cp2=-（高度/2.5）；
var cp3=iMidWidth；
var cp4=高度*3.5；
var endX=宽度+50；
var endY=高度/1.7；
ctx.lineWidth=40
ctx.strokeStyle='#efc833'；
ctx.beginPath（）；
ctx.moveTo（-10，高度-10）；
ctx.bezierCurveTo(
cp1，
cp2，
cp3，
cp4，
endX，
恩迪
);
ctx.lineCap='圆形'；
ctx.stroke（）；
ctx.closePath（）；
}
Draw（）
.wave{
背景色：透明；
}

请阅读我的问题，我已经开始画曲线了。我试图在imageCan中实现这个示例，您可以将代码放在jsbin或codepen上，以查看到目前为止的情况。我想帮你，只是需要你对问题的细节更明确一点。我在这里是为了帮助你实现你的目标，而不是为你实现它。更新了我的答案。啦啦队队员。我已经发布了一个答案，并更新了你的答案，结果是我想要的LOL为什么你有
var cp2=-（height/1）
。为什么不让它成为
var cp2=-height
？@Anthony-一个很好的问题，这更多是为了如果有人想使用代码，他们可以编辑
var cp2=-（height/1）
来喜欢
var cp2=-（height/3）