HTML CSS3 / Canvas 图像扭曲

Question

HTML CSS3 / Canvas 图像扭曲

htmlcsscanvasdistortion

3

有没有一种方法可以使用CSS3或HTML5中的画布标签(skew/distort)只扭曲一个角落？

这是来自Photoshop教程的截图，展示如何实现：

Skew in Photoshop

更新:

这是我目前找到的最好的，但它并不是100％准确的： https://github.com/edankwan/PerspectiveTransform.js

更新2:

我需要这个的html5版本: http://www.rubenswieringa.com/code/as3/flex/DistortImage/

- Hese

+1 我认为这是一个非常有趣的问题 :) 我找到了一些信息（你可能之前就已经找到了，但以防万一）关于在 Kinetics.js 中实现此功能的方法。该信息可以在 http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/ 找到。 - Arkana

2个回答

0

我认为this就是你要找的。

- galeo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sachin · Accepted Answer

这应该会帮到您。链接1

在发布问题之前，您应该尝试搜索一下。我搜了html5 canvas skew image，发现有很多结果。

更新
请查看这个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);
});