通过 Javascript canvas 组合单元格添加图像

Question

首先，由于我的英语不是很好，所以解释起来有困难。但我会尽力解释。

我使用 Javascript 将随机照片添加到 canvasta 单元格字段。

每幅图相当于20pixels。我想做的是：如果地图数据中的 i 和 y 等于 4；我想把我想要的照片添加到一个4x4的区域。

也就是说，同时将一张照片增加到20像素；我想在 4x4 时将照片添加到 320pixel 区域。

如示例照片所示。 Check Photo

var map = [
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        ];
        
        window.onload = function() {
            const canvas = document.getElementById("main");
            const ctx = canvas.getContext("2d");
            ctx.strokeStyle = "transparent";
            ctx.lineWidth = 0;

            
            //draw grid
            for (let i = 0; i <= 300; i++) {
                const x = i*20;
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
                
                const y = i*20;
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
            
            
            //draw images
            const p = ctx.lineWidth / 1; //padding
            for (let xCell = 0; xCell < map.length; xCell++) {
                for (let yCell = 0; yCell < map[xCell].length; yCell++) {
                    const x = xCell * 20;
                    const y = yCell * 20;
                    const img = new Image();
                    if (map[xCell][yCell] === 1) {
                        img.onload = function() {
                            ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
                        };
                        
                        //TODO: set img.src to your api url instead of the dummyimage url.
                        img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}/200/300`;
                    }else if(map[xCell][yCell] == 4){
                        img.onload = function() {
                            ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
                        };
                        
                        //TODO: set img.src to your api url instead of the dummyimage url.
                        img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
                    }
                
                }
            }
        };

<canvas id="main" width="600" height="630"></canvas>
        
    </canvas>

Answer 1

您可以计算乘数的值并使用它来确定图片大小。

var map = [
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
            [1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        ];
        
        window.onload = function() {
            const canvas = document.getElementById("main");
            const ctx = canvas.getContext("2d");
            ctx.strokeStyle = "transparent";
            ctx.lineWidth = 0;

            
            //draw grid
            for (let i = 0; i <= 300; i++) {
                const x = i*20;
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
                
                const y = i*20;
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
            
            
            //draw images
            const p = ctx.lineWidth / 1; //padding
            for (let xCell = 0; xCell < map.length; xCell++) {
                for (let yCell = 0; yCell < map[xCell].length; yCell++) {
                    let multiplier = ((map[xCell][yCell] % 4) ? 1 : 4);
                    const x = xCell * 20;
                    const y = yCell * 20;
                    const img = new Image();
                    if (map[xCell][yCell] === 1) {
                        img.onload = function() {
                            ctx.drawImage(img, y+p, x+p, multiplier * 20-p*2, multiplier * 20-p*2);
                        };
                        
                        //TODO: set img.src to your api url instead of the dummyimage url.
                        img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}/200/300`;
                    }else if(map[xCell][yCell] == 4){
                        img.onload = function() {
                            ctx.drawImage(img, y+p, x+p, multiplier * 20-p*2, multiplier * 20-p*2);
                        };
                        
                        //TODO: set img.src to your api url instead of the dummyimage url.
                        img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
                    }
                
                }
            }
        };

<canvas id="main" width="600" height="630"></canvas>
        
    </canvas>

Answer 2

我解决了如下问题。 有位置错误，但我会完全修复它们。

感谢 Lajos Arpad 的帮助。

var defaultMap = [
                [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1],
                [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                [0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
                [0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1],
            ];
            var images = [
                {
                    name: "player 1",
                    position: [
                        {
                            x: [0,4],
                            y: [4,4]
                        }
                    ]
                },
                {
                    name: "player 2",
                    position: [
                        {
                            x: [5,7],
                            y: [5,2]
                        }
                    ]
                }
            ];
            
            window.onload = function() {
                const canvas = document.getElementById("main");
                const ctx = canvas.getContext("2d");
                ctx.strokeStyle = "transparent";
                ctx.lineWidth = 0;

                
                //draw grid
                for (let i = 0; i <= 300; i++) {
                    const x = i*40;
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                    
                    const y = i*40;
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width, y);
                    ctx.stroke();
                }
                
                const p = ctx.lineWidth / 1;
                for (let xCell = 0; xCell < defaultMap.length; xCell++) {
                    for (let yCell = 0; yCell < defaultMap[xCell].length; yCell++) {
                        const x = xCell * 20;
                        const y = yCell * 20;
                        const img = new Image();
                        if (defaultMap[xCell][yCell] === 1) {
                            img.onload = function() {
                                ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
                            };
                            
                            img.src = `https://besthqwallpapers.com/Uploads/5-6-2020/134999/thumb-black-ground-texture-macro-grunge-textures-black-backgrounds-ground-textures.jpg`;
                        }
                    
                    }
                }

                for (let i = 0; i < images.length; i++) {
                    var width = 1, height = 1, x = images[i].position[0].x[0], y = images[i].position[0].y[0];
                    console.log(images[i].name + " x => " + images[i].position[0].x[0])
                    for(let w = images[i].position[0].x[0]; w < images[i].position[0].x[1]; w++){
                        width++
                    }
                    
                    for(let h = 1; h < images[i].position[0].y[1]; h++){
                        height++
                    }
                    const img = new Image();
                    img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
                    img.onload = function() {
                        console.log(20*images[i].position[0].x[0]+p)
                        /* ctx.rect(20*i, 20*i, 20*width-p*2, 20*height-p*2)
                        ctx.fillStyle = "blue";
                        ctx.fill(); */
                        ctx.drawImage(img, 20*images[i].position[0].y[0]+p, 20*images[i].position[0].x[0]+p, 20*width-p*2, 20*height-p*2);
                    };
                    
                }
            };

<canvas id="main" width="600" height="630"></canvas>
        
</canvas>

通过 Javascript canvas 组合单元格添加图像

Adding images by combining cells with Javascript canvas

javascript

canvas

cell