使用画布HTML5绘制带有角度的地砖

我正在为瓷砖制造商开发一个应用程序，为此我使用了HTML5画布。选择瓷砖时，墙壁和地板应与所选瓷砖保持一致。对于墙壁矩形，它是非常直接的，我成功地做到了这一点，但当使用同样的地板时，它看起来不像地砖。缺少一些变换/旋转/角度

我在博客里搜索，想在地板砖上找个角度，但没有找到合适的解决办法

下面是我从代码中得到的图像，下面是代码示例

代码：-

<canvas id="canvas1"></canvas>

<script>
        var sources = {
                wallTile: './assets/tile_347.jpg',
                floorTile: './assets/tile_390.jpg',
            };

     function drawPattern(wallimg, floorimg, size, rectY) {
            var canvas = document.getElementById('canvas1');

            canvas.width = 1366;
            canvas.height = 800;

            var tempCanvas = document.createElement("canvas");
            var tCtx = tempCanvas.getContext("2d");

            tempCanvas.width = size;
            tempCanvas.height = size;
            tCtx.drawImage(wallimg, 0, 0, wallimg.width, wallimg.height, 0, 0, size, size);

            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.fill();
            tFloorCtx.setTransform(1,1,-0.5,1,30,10);
            tFloorCtx.rotate(50);

            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
           //  ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');
        //    ctx.rotate(0);
            ctx.beginPath();
            ctx.rect(0,rectY,canvas.width, 400);
            ctx.closePath();
            ctx.fill();

            var roomImg = new Image();
            roomImg.src = './assets/room11.png';
            roomImg.onload = function() {
                ctx.drawImage(roomImg, 0, 0, canvas.width, canvas.height);
                ctx.restore();
            }

            ctx.fillStyle = ctx.createPattern(tempFloorCanvas, 'repeat');
            ctx.beginPath();

            ctx.rect(0,400,canvas.width, 400);
            ctx.closePath();
            ctx.fill();

            ctx.restore();


        }

        var img = new Image();
        img.src = './assets/wallTile.jpg';
        img.onload = function(){
            var wallimg = this;
            var floorimg = new Image();
            floorimg.src = './assets/floorTile.jpg';
            floorimg.onload = function(){
                drawPattern(wallimg, this, 100, 0);
            }
        }


    </script>

风险值来源={
墙砖：'./资产/tile_347.jpg'，
地板材料：'./资产/瓷砖_390.jpg'，
};
功能绘图模式（墙壁、地板边缘、尺寸、矩形）{
var canvas=document.getElementById（'canvas1'）；
画布宽度=1366；
帆布高度=800；
var tempCanvas=document.createElement（“画布”）；
var tCtx=tempCanvas.getContext（“2d”）；
tempCanvas.width=大小；
tempCanvas.height=大小；
tCtx.drawImage（wallimg，0，0，wallimg.width，wallimg.height，0，0，size，size）；
var tempFloorCanvas=document.createElement（“画布”）；
var tFloorCtx=tempFloorCanvas.getContext（“2d”）；
tempFloorCanvas.width=尺寸；
tempFloorCanvas.height=尺寸；
tFloorCtx.drawImage（地板边缘，0,0，地板边缘.宽度，地板边缘.高度，0,0，尺寸，尺寸）；
tFloorCtx.fill（）；
设置变换（1,1，-0.5,1,30,10）；
t地板旋转（50）；
//使用getContext使用画布进行绘图
var ctx=canvas.getContext（'2d'）；
//clearRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=ctx.createPattern（tempCanvas，'repeat'）；
//ctx.旋转（0）；
ctx.beginPath（）；
ctx.rect（0，rectY，canvas.width，400）；
ctx.closePath（）；
ctx.fill（）；
var roomImg=新图像（）；
roomImg.src='./assets/room11.png'；
roomImg.onload=函数（）{
ctx.drawImage（roomImg，0，0，canvas.width，canvas.height）；
ctx.restore（）；
}
ctx.fillStyle=ctx.createPattern（tempfolorcanvas，“repeat”）；
ctx.beginPath（）；
ctx.rect（0400，画布宽度，400）；
ctx.closePath（）；
ctx.fill（）；
ctx.restore（）；
}
var img=新图像（）；
img.src='/资产/wallTile.jpg'；
img.onload=函数（）{
var wallimg=这一点；
var floorimg=新图像（）；
floorimg.src='./assets/floorrtile.jpg'；
floorimg.onload=函数（）{
绘图模式（wallimg，this，100,0）；
}
}

如果有其他解决方案来实现该功能，或者如果有第三方插件可以将我的画布转换为某个角度，使其看起来像房间的地板，那么请让我知道

---

我不熟悉画布和html5。

顾名思义，2D上下文用于处理2D内容，不提供任何现成的3D功能-仿射变换不能用于变换3D空间中的任何内容

尽管手动实现3D功能是完全可能的，但您最好查看WebGL，它确实提供了本例中所需的所有3D功能

如果您不熟悉WebGL的概念，您可以研究哪些方面为您提供了所有的基本功能（设置着色器等），并提供一个易于使用的API。它还提供2D渲染器，以防应用程序在不支持WebGL/GPU的浏览器/计算机上运行。不过，您确实需要熟悉基本的3D概念

如果没有将内容作为对象，则可以将地板作为对象（可以在three.js中生成的平面矩形）进行组合渲染，并将其余图形作为精灵插入顶部（明显的限制是房间处于固定视图中，即无法在房间内旋转/移动/看起来很奇怪）

---

关于2D上下文和3D透视：请看一看我的一个以及。请注意，这些示例并非用于生产。

可能重复感谢tif提供的信息，但我遵循该思路，没有找到我要找的示例。我想为看起来像房间地板的地砖添加一些角度/旋转/变换。你能有不同的想法吗？