есть ли способ растянуть изображение между несколькими заданными точками на холсте (аналогично Transform).Когда я использую Transform, я определенно могу растянуть его, однако он не дает всех необходимых мне опций для того, что я имею в виду.Например, если я собираюсь сделать игру, которая должна генерировать объекты, такие как коробки, я хочу убедиться, что в зависимости от того, где находится игрок, повернуть изображение на боковой стороне коробки и трансформировать их, как будто выдвигаясь вокруг них.В преобразовании я могу сделать это, однако он всегда будет сохранять одинаковую высоту с обеих сторон изображения (слева и справа), в то время как мне нужно больше контроля, чтобы уменьшить высоту только на правой стороне изображения (скажем так),Буду очень признателен, если вы сможете дать подсказку, как это сделать без использования какой-либо библиотеки.
Вот пример того, что у меня есть (хотя опять-таки второе изображение справа все еще сохраняет ту же высоту наэто правая сторона, такая же, как левая):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reshape images</title>
</head>
<body style="margin:10px;">
<canvas id="canvas" style="background:#000;"></canvas>
<script type="text/javascript">
// INITIAL SETUP
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var innerWidth = 1000,
innerHeight = 650;
canvas.width = innerWidth;
canvas.height = innerHeight;
var img = new Image;
img.onload = function() {
var tile1 = [
{x: 10, y: 10}, // upper left corner
{x: 210, y: 50}, // upper right
{x: 230, y: 150}, // bottom right
{x: 30, y: 110} // bottom left
],
tile2 = [
{x: 210, y: 50},
{x: 410, y: 5},
{x: 430, y: 105},
{x: 230, y: 150}
];
renderTile(this, tile1);
renderTile(this, tile2);
function renderTile(img, tile) {
var dx, dy, a1, a2, w, h, i = 1;
// calc horizontal angle
dx = tile[1].x - tile[0].x; // horizontal diff.
dy = tile[1].y - tile[0].y; // vertical diff.
a1 = Math.atan2(dy, dx); // angle, note dy,dx order here
w = dx|0; // width based on diff for x
// calc vertical angle
dx = tile[3].x - tile[0].x;
dy = tile[3].y - tile[0].y;
a2 = Math.atan2(dx, dy); // note dx,dy order here
h = dy|0;
// draw image to fit parallelogram
// ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
ctx.drawImage(img, 0, 0, w, h);
}
};
img.src = "http://i.imgur.com/rUeQDjE.png";
</script>
<script src="src.js"></script>
</body>
</html>