用 html5 canvas 绘制地砖，但请注意 perfect.how 我可以使用 webgl 使它逼真吗

Question

看起来不像地砖。缺少一些转换/旋转/角度。如何用html5canvas

做透视图

这是代码

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);
        }

如果有其他解决方案来实现该功能，或者如果有第三方插件可以将我的 canvas 转换成某个角度看起来像房间的地板，请告诉我。

Answer 1

开箱即用的 HTML5 CanvasRenderingContext2D API 不提供进行透视投影的方法。有一些成熟的第三方库，最重要的是 Three.js 可以让您进行此类转换。

但是，如果您只想对图像进行透视扭曲，那么学习 Three.js API 甚至更糟的是使用 WebGL 自行实现它就太过分了。

幸运的是有一个叫做 perspective.js 的小图书馆。

这是一个例子：

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>

用 html5 canvas 绘制地砖，但请注意 perfect.how 我可以使用 webgl 使它逼真吗

Drawing the floor tiles with html5 canvas but it is note perfect.how can i make realistic using webgl

html

javascript

html5-canvas