javascript - HTML 5 倾斜代码

Question

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

什么样的几何计算应用于<canvas>上下文？我不能为此使用 CSS，因为它必须动态修改。

Answer 1

CSStransform: 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);
}

现场示例

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

Answer 3

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