캔버스를 사용하여 사다리꼴 모양으로 이미지를 그리는 방법

Question

캔버스를 사용하여 사다리꼴 모양으로 이미지를 그려야합니다.

변환을 시도했지만 사다리꼴 뷰가 표시되지 않습니다.

캔버스를 사용하여 사다리꼴로 이미지를 그리는 해결책을 알려주십시오.

나는 실제 이미지는 다음과 같이 변화해야합니다/_ \

Answer 1

다음

당신이 사다리꼴 모양으로 이미지를 "변환"할 수있는 방법이다. 이 기술은 선에 대한 이미지 선을 잘게 잘랐으며 선을 조금씩 축소하여 그리는 기법입니다.

이 기능을 사용하면 사다리꼴 모양의 양 (%)을 설정할 수 있습니다뿐만 아니라 스케일 이미지를 처리합니다

function drawTrapezoid(ctx, img, x, y, w, h, factor) { 

    var startPoint = x + w * 0.5 * (factor*0.01), // calculate top x 
     xi, yi, scale = img.height/h,   // used for interpolation/scale 
     startLine = y,       // used for interpolation 
     endLine = y + h;       // abs. end line (y) 

    for(; y < endLine; y++) { 

     // get x position based on line (y) 
     xi = interpolate(startPoint, y, x, endLine, (y - startLine)/h); 

     // get scaled y position for source image 
     yi = (y * scale + 0.5)|0; 

     // draw the slice 
     ctx.drawImage(img, 0, yi, img.width, 1,  // source line 
          xi.x, y, w - xi.x * 2, 1); // output line 
    } 

    // sub-function doing the interpolation   
    function interpolate(x1, y1, x2, y2, t) { 
     return { 
      x: x1 + (x2 - x1) * t, 
      y: y1 + (y2 - y1) * t 
     }; 
    } 
} 

FIDDLE

희망이 도움이!