我需要使用 Javascript 模拟倾斜图像的效果,例如 Photoshop。你们知道如何在Javascript中做到这一点吗?
什么样的几何计算应用于<canvas>
上下文?我不能为此使用 CSS,因为它必须动态修改。
我需要使用 Javascript 模拟倾斜图像的效果,例如 Photoshop。你们知道如何在Javascript中做到这一点吗?
什么样的几何计算应用于<canvas>
上下文?我不能为此使用 CSS,因为它必须动态修改。
CSStransform: skew();
将在没有 Javascript 的情况下为您完成这项工作。
演示:http: //jsfiddle.net/ThinkingStiff/MtWBy/
#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;
}
<div id="original" class="image"></div>
<div id="vertical" class="image"></div>
<div id="horizontal" class="image"></div>
我找到了解决方案:http ://www.w3schools.com/html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0