0
375
VistasDibujar las baldosas del piso con lienzo html5 pero es perfecto. ¿Cómo puedo hacer que sea realista usando webgl?
no parecía un piso de baldosas. Faltaba alguna transformación/rotación/ángulo. Cómo hacer vista en perspectiva con lienzo html5
aquí está el código
function drawPattern(img, size, rectY) { var roomImg = new Image(); roomImg.src = './assets/room2.png'; roomImg.onload = function() { ctx.drawImage(roomImg, 0, 0, canvas.width, canvas.height); ctx.restore(); } var canvas = document.getElementById('canvas1'); canvas.width = 1350; canvas.height = 600; var tempFloorCanvas = document.createElement("canvas"); var tFloorCtx = tempFloorCanvas.getContext("2d"); tempFloorCanvas.width = size; tempFloorCanvas.height = size; tFloorCtx.drawImage(floorimg, 0, 0, floorimg.width, floorimg.height, 0, 0, size, size); tFloorCtx.setTransform(1,1,-0.5,1,30,10); tFloorCtx.rotate(50); tFloorCtx.fill(); var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = ctx.createPattern(tempFloorCanvas, 'repeat'); ctx.beginPath(); ctx.rect(0,400,canvas.width, 400); ctx.closePath(); ctx.fill(); ctx.restore(); } var floorimg = new Image(); floorimg.src = './assets/tile5.jpg'; floorimg.onload = function(){ drawPattern(floorimg, 70, 0); }Si hay otra solución para implementar la función o si hay complementos de terceros que pueden transformar mi lienzo en algún ángulo para que parezca el piso de la habitación, házmelo saber.
1 Respuestas
Responde la pregunta0
De fábrica, la API CanvasRenderingContext2D de HTML5 no ofrece una forma de hacer una proyección en perspectiva. Hay algunas bibliotecas de terceros en toda regla, principalmente Three.js que, entre otras cosas, le permiten hacer este tipo de transformaciones.
Sin embargo, si todo lo que quiere hacer es distorsionar la perspectiva de una imagen, sería excesivo aprender la API de Three.js o, peor aún, implementarla por su cuenta usando WebGL.
Afortunadamente, hay una pequeña biblioteca llamada perspectiva.js .
Aquí hay un ejemplo:
let canvas = document.getElementById("canvas"); let image = new Image(); image.onload = function() { let ctx = canvas.getContext("2d"); let p = new Perspective(ctx, image); p.draw([ [30, 0], [canvas.width - 30, 0], [canvas.width, canvas.height], [0, canvas.height] ]); } image.src = "https://picsum.photos/id/1079/200/300"; canvas { border: gray solid 1px; } <script src="https://cdn.rawgit.com/wanadev/perspective.js/master/dist/perspective.min.js"></script> <canvas id="canvas"></canvas>