HTML CSS3/Canvas Image Distortion

Question

有沒有辦法在HTML5中使用CSS3或canvas標籤歪斜/扭曲只有一個角？

這裏是從Photoshop教程截圖如何做到這一點：

更新：

這是到目前爲止，我已經找到了最好的，但它不是100％準確： https://github.com/edankwan/PerspectiveTransform.js

UPDATE2：

我需要這個HTML5版本： http://www.rubenswieringa.com/code/as3/flex/DistortImage/

Answer 1

這會幫助你。 Link1

而您應該在發佈問題前嘗試搜索。我搜索了html5帆布歪斜圖像，它顯示了我很多結果。

---

更新
看看這個 Fiddle

// Find each img, and replace it with a canvas 
$('img').each(function (index, el) { 
var c,  // new canvas which will replace this img element 
    ctx, // context of new canvas 
    i,  // loop counter 
    tmpCtx, // temp context for doing work 
    h,  // height of the image/new canvas 
    w,  // width of the image/new canvas 
    dh,  // destination height (used in translation) 
    dw,  // destination width (used in translation) 
    dy,  // destination y 
    leftTop,// left top corner position 
    leftBot;// left bottom corner position 

// Get the height/width of the image 
h = el.height; 
w = el.width; 

// Create the canvas and context that will replace the image 
c = $("<canvas height='" + h + "' width='" + w + "'><\/canvas>"); 
ctx = c.get(0).getContext('2d'); 

// Create a temporary work area 
tmpCtx = document.createElement('canvas').getContext('2d'); 

// Draw the image on the temp work area 
for (i = 0; i < h; i++) { 
    dw = Math.abs((w * (h - i) + w * i)/h); 
    tmpCtx.drawImage(el, 
     0, i, w, 1, // sx, sy, sw, sh 
     0, i, dw, 1); // dx, dy, dw, dh 
} 

// Calculate the left corners to be 20% of the height 
leftTop = parseInt(h * .2, 10); 
leftBot = parseInt(h * 1, 10) - leftTop; 

ctx.save(); 

// Draw the image on our real canvas 
for (i = 0; i < w; i++) { 
    dy = (leftTop * (w - i))/w; 
    dh = (leftBot * (w - i) + h * i)/w; 
    ctx.drawImage(tmpCtx.canvas, 
     i, 0, 1, h, 
     i, dy, 1, dh); 
} 

ctx.restore(); 

// Replace the image with the canvas version 
$(el).replaceWith(c); 
}); 

Answer 2

我覺得this是你在找什麼。