Добрый день
У меня есть фотография дома, сфотографированного под углом. У дома есть окна. В эти окна мне нужно "вписать" "картинки". Время от времени фотографии дома и "картинки" будут меняться. Поэтому хочу автоматизировать работу и разобраться в вопросе "как работать с канвасом".
На сколько я понимаю, делать это "рукам" долго и сложно, должны быть библиотеки для создания игр. Подскажите, пожалуйста, подходящую библиотеку и в двух словах "что делать"\"куда смотреть".
Возможно, эту задачу решает работа с "текстурами". Возможно, потребуется WebGL
У меня получился такой код:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>House</title>
<style>
#canvas {
border:1px solid #d3d3d3;
background-image: url('<ФОТКА ДОМА>.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<canvas width="923px" height="507px" id="canvas">Your browser does not support the HTML5 canvas tag.</canvas>
</body>
<script>
const $canvas = document.getElementById("canvas");
const context = $canvas.getContext("2d");
const img = new Image();
img.src = '<КАРТИНКА>.jpg';
img.onload = function () {
// Тут пытался "вертеть" канвас, но ничего не получилось
context.drawImage(this, 100, 100, 30, 50); // Рисую картинку, которая начинается в верхнем левом углу дома
}
</script>
</html>
