如何将图像像素的贝塞尔曲线生成为预定义的形状

Question

我有这样一张图片：

我有这个质地：

我想生成这样的曲线，使其适合衣领形状。我试过这段代码但无法这样做。帮帮我

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI*0.8/h;           // full circle / width of canvas
  var scale =250;                       // max displacement on y
  
  for(var x = 0; x < w; x++) {
    ctx.drawImage(this,
      x, 0, 1, h,                       // source line from image
      x, Math.sin(step*x)*scale, 1, h); // displaced line
  }
}

canvas{
  transform:rotate(90deg)
}

<canvas id=c></canvas>

Answer 1

我已经将这种曲线应用到 structure.Some 步长和比例值变化的项圈中，我得到了我的解决方案。

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI*2.3/w/2;        // full circle / width of canvas
  var scale =-180                    // max displacement on y
  
  for(var x = 0; x < w; x++) {
    ctx.drawImage(this,
      x, 0, 1, h,                       // source line from image
      x, Math.sin(step*x)*scale, 1, h); // displaced line
  }
}

<canvas id=c></canvas>

如何将图像像素的贝塞尔曲线生成为预定义的形状

How to generate bezier curve of image pixel into predefined shape

javascript

bezier

canvas

html5-canvas