如何使用画布以梯形形状绘制图像

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

希望这有助于！