css - 如何在不扭曲图像的情况下获得空中飞人图像？

Question

我试图以空中飞人的形式呈现图像，而不会弄乱实际图像，也不会使用倾斜。我该怎么做？

Answer 1

您可以为此使用 Canvas :

Online demo here

简单调整 HTML 以使用 Canvas 代替:

<div class="box">
    <canvas id="canvas"></canvas>
</div>    

删除一些 CSS 规则规范:

.box{
    height:300px;  
    overflow:hidden;
}

.box > canvas {
    height: 100%;
    width: 100%;
}

并在 JavaScript 部分添加:

var img = new Image,
    ctx = document.getElementById('canvas').getContext('2d');

/// load image dynamically (or use an existing image in DOM)
img.onload = draw;
img.src = 'http://cssglobe.com/lab/angled/img.jpg';

function draw() {

    /// set canvas size = image size
    var w, h;
    canvas.width = w = this.naturalWidth;
    canvas.height = h = this.naturalHeight;

    /// draw the trapez shape
    ctx.moveTo(0, h * 0.25);
    ctx.lineTo(w, 0);
    ctx.lineTo(w, h);
    ctx.lineTo(0, h * 0.75);

    /// make it solid
    ctx.fill();

    /// change composite mode to replace the solid shape
    ctx.globalCompositeOperation = 'source-in';

    /// draw in image
    ctx.drawImage(this, 0, 0);
}

这适用于所有现代浏览器。如果不需要，那么 palpatim 的方法会更快。

希望这对您有所帮助。