Wie Bezierkurve des Bildpixels in vordefinierte Form

Question

Ich habe diese Art von Bild zu erzeugen:

und ich habe diese Textur:

Ich mag so erzeugen, Kurven, dass es in Kragenform passen sollte. Ich habe diesen Snippet-Code ausprobiert, bin aber nicht dazu in der Lage. Helfen Sie mir

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

ich diese Art von Kurve in den Kragen structure.Some der Veränderungen in den Schritt und Skalenwert umgesetzt hatte, und ich habe meine Lösung.

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>