HTML 5歪斜代码

Question

我需要使用Javascript来模拟像Photoshop一样倾斜图像的效果。你们知道如何在Javascript中做到这一点吗？

对<canvas>上下文应用哪种几何计算？ 我无法使用CSS ，因为它必须动态修改。

Answer 1

CSS transform: skew();将在没有Javascript的情况下为您执行此操作。

演示： http://jsfiddle.net/ThinkingStiff/MtWBy/

输出

CSS

#original {
    margin: 55px 10px 0 10px;
}

#vertical {
    margin: 30px 20px 0 0;
    transform:             skew( 0, -30deg );
        -ms-transform:     skew( 0, -30deg );
        -moz-transform:    skew( 0, -30deg );
        -o-transform:      skew( 0, -30deg );
        -webkit-transform: skew( 0, -30deg );
}

#horizontal {
    margin: 55px 0 0 0;
    transform:             skew( -30deg, 0 );
        -ms-transform:     skew( -30deg, 0 );
        -moz-transform:    skew( -30deg, 0 );
        -o-transform:      skew( -30deg, 0 );
        -webkit-transform: skew( -30deg, 0 );
}

.image {
    background-image: url( 'http://placekitten.com/100' );  
    border: 1px solid black;
    display: inline-block;
    height: 100px;
    margin-right: 20px; 
    vertical-align: top;
    width: 100px;  
}

HTML

<div id="original" class="image"></div>
<div id="vertical" class="image"></div>
<div id="horizontal" class="image"></div>

Answer 2

单独使用CSS3可以实现这一点：

img {
  -webkit-transform: skew(45deg);
}

<强> Live Example

注意，我只使用了webkit，但它对所有其他现代浏览器都是一样的。

Answer 3

我找到了解决方案：http://www.w3schools.com/html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0