JavaScript扭曲图像[画布]

Question

我有这样的形象：

并且想要这样做：

我可以在javascript中执行此操作吗？

Answer 1

你走了。三种方法，在css，canvas和svg中。你在底部也有一个工作的例子。

<强> CSS

#outer {
  perspective: 200px;
  -webkit-perspective: 200px;
}
#inner {
  position: absolute;
  left: 30px;
  width: 70%;
  height: 80%;
  background-color: #fff;
  transform: rotate(7deg) rotateX(40deg);
  -webkit-transform: rotate(7deg) rotateX(40deg);
}

<强>帆布

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

canvas.width = 200;
canvas.height = 150;

ctx.beginPath();
ctx.moveTo(50, 18);
ctx.lineTo(160, 30);
ctx.lineTo(180, 120);
ctx.lineTo(10, 100);
ctx.fillStyle = "#fff";
ctx.fill();

<强> SVG

<svg>
  <path d="M50 18 L160 30 180 120 10 100 z" fill="#fff" />
</svg>

以下是 jsfiddle 上所有3个的有效示例。

希望它有所帮助。干杯！