如何图像像素转换成S形曲线形状在画布

Question

我有这种类型的图像

我想这就是我们在图像看到直线（实际上这是像素），应该被转换成S曲线。我已经使用画布及其属性实现了C型曲线，但无法做S曲线。

请帮我。

Answer 1

如果我正确理解你，你希望每条垂直线都遵循“S”？

如果是这种情况，您可以使用f.ex. Math.sin()结合drawImage()及其裁剪参数来切片每个像素列的图像，同时根据sin（）替代切片。

关键的公式是：

var step = Math.PI * 2/w; 

这映射了一大圈到画布的宽度，使达到结束的时候，我们会回到起点，在这种情况下形成S-曲线。

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

这将根据先前计算的步长值（现在链接到x位置）计算y轴上的位移。这会产生一个介于-1和1之间的值，所以我们需要扩展它。刻度表示以像素数为单位的最大半径。

例

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

<canvas id=c></canvas>

在x轴（显然不是在这种情况下为可见由于变化沿着线发生，还有其它方法，可以用于例如在每个末端以s形过度拉伸）：

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

<canvas id=c></canvas>