Question

我正在为Tiles制造商开发一个应用程序，为此我正在使用HTML5 Canvas。选择瓷砖时所选瓷砖应能感觉到墙壁和地板。对于墙矩形来说，这很简单，我很成功，但是当将它用于地板时，它看起来不像是地砖。缺少一些变换/旋转/角度。

我搜索博客时发现地砖有一定角度，但是找不到合适的解决方案。

下面是我从代码中获得的图像，下面也是代码示例。

代码：-

<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>

如果有实现该功能的另一种解决方案，或者如果有第三方插件可以将我的画布转换为某种角度，使其看起来像房间的地板，请告诉我。

我是canvas和html5的新手。

Answer 1

好吧，顾名思义，2D上下文旨在做2D东西，并且不提供任何现成的3D功能-仿射变换不能用于在3D空间中变换任何东西。

尽管完全有可能手动实现3D功能，但最好还是研究一下可以为您提供在这种情况下所需的所有3D功能的WebGL。

如果您不熟悉WebGL的概念，可以研究three.js，它为您完成了所有棘手的工作（设置着色器等），并提供了易于使用的API。如果您的应用程序在不支持WebGL / GPU的浏览器/计算机上运行，它还提供了2D渲染器。不过，您确实需要熟悉基本的3D概念。

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

关于2D上下文和3D透视图：看一下我的older answers和this one之一。请注意，这些示例并非供生产使用。

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

1 个答案: