나는 이미지의 같은 유형이 미리 정의 된 모양

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>