如何使用畫布以梯形形狀繪製圖像

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

希望這有助於！