HTML CSS3/画布图像失真

在HTML5中，有没有一种方法可以使用CSS3或canvas标记只扭曲一个角

以下是Photoshop教程中的屏幕截图：

更新：

这是到目前为止我发现的最好的结果，但不是100%准确：

更新2:

我需要这个的html5版本：

这应该对您有所帮助。

在发布问题之前，您应该尝试搜索。我搜索了html5画布倾斜图像，它显示了很多结果

---

更新
看看这个

//找到每个img，并将其替换为画布
$（'img'）。每个函数（索引，el）{
var c，//将替换此img元素的新画布
ctx，//新画布的上下文
i、 //循环计数器
tmpCtx，//用于执行工作的临时上下文
h、 //图像/新画布的高度
w、 //图像/新画布的宽度
dh，//目的地高度（用于翻译）
dw，//目标宽度（用于翻译）
dy，//目的地y
leftTop，//左上角位置
leftBot；//左下角位置
//获取图像的高度/宽度
h=标高高度；
w=标高宽度；
//创建将替换图像的画布和上下文
c=$（“”）；
ctx=c.get（0.getContext（'2d'）；
//创建临时工作区
tmpCtx=document.createElement（'canvas'）.getContext（'2d'）；
//在临时工作区上绘制图像
对于（i=0；i

我想这就是您想要的。

谢谢您的链接，但这些链接对我没有帮助。正如你所看到的，所有的例子都是“正常”的倾斜教程，比如这样做：或者玩透视：我只需要倾斜一个角+1，我认为这是一个非常有趣的问题：）我找到了一些关于的信息（你可能以前找到过，但如果有帮助的话）。

// 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);
});