如何在画布中将图像像素转换为s曲线形状

Question

我有这种类型的图片

我希望我们在图像中看到直线（实际上是像素），它应该转换为S曲线。我使用canvas及其属性实现了C型曲线，但无法进行S曲线。

请帮助我。

Answer 1

如果我理解正确，您希望每条垂直线都遵循＆＃34; S＆＃34;？

如果是这种情况，你可以使用f.ex. Math.sin()与drawImage()及其剪裁参数相结合，可以根据sin（）移动切片，从而切片每个像素列的图像。

关键公式是：

var step = Math.PI * 2 / w;

这会将一个完整的圆圈映射到画布的宽度，这样当到达终点时我们将回到起点，在这种情况下形成一条S曲线。

var y = Math.sin(step * x) * scale;

这将根据先前计算的步长值计算y轴上的位移，现在该步长值与x位置相关联。这会产生介于-1和1之间的值，因此我们需要对其进行扩展。比例表示像素数的最大半径。

实施例

＆＃13;

＆＃13;

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 / w;           // full circle / width of canvas
  var scale = 75;                       // 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
  }
}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;

在x轴上（在这种情况下显然不可见，因为沿着线发生了变化，并且还有其他可以使用的方法，例如在每一端都有一个s形覆盖）：

＆＃13;

＆＃13;

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 / h;           // full circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var y = 0; y < h; y++) {
    ctx.drawImage(this,
      0, y, w, 1,                       // source line from image
      Math.sin(step*y)*scale, y, w, 1); // displaced line
  }
}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;