5

Javascript を使用して、Photoshop などの画像を歪ませる効果をシミュレートする必要があります。Javascriptでそれを行う方法を知っていますか？

<canvas>コンテキストに適用されるジオメトリ計算の種類は? 動的に変更する必要があるため、これには CSS を使用できません。

ここに画像の説明を入力

4

3 に答える 3

2

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>
于 2012-07-16T19:25:58.320 に答える
2

これは、CSS3 だけで可能です。

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

実際の例

注、私は webkit のみを使用しましたが、他のすべての最新ブラウザーでも同じです。

于 2012-07-16T19:26:25.357 に答える
2

私は解決策を見つけました：http://www.w3schools.com/html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0

于 2012-07-16T20:50:50.323 に答える