构造具有两个符号的三角形图案

Question

我知道如何使用单个符号构建上述三角形。

我不明白如何更改我的代码以使用两个符号。

Answer 1

使用多种不同的解决方案可以解决您的问题......

对于它来说，这就是我如何用画布来创建一个图像（复制/粘贴和改编an answer I gave to another SO user yesterday ...）。这个解决方案可能不符合您的需求，但Jishnu V S再次声明，您没有给我们任何帮助。

ps：是的，我知道，与简单的HTML列表相比，WAY矫枉过正......好吧xD

fiddle

HTML

<canvas id="canvas" width=1000 height=1000></canvas>

JS

    var rows = 8,
        cols = 1,
        size = 64;

    var canvas = document.getElementById("canvas");
    var surface = canvas.getContext("2d");

    //creating tile
    function box(img) {
        this.xaxis = 64;
        this.yaxis = 0;

//Set your image selection logic here...
        this.src = (img > 0 ) ? "https://cdn0.iconfinder.com/data/icons/typicons-2/24/times-512.png" : "http://img.freepik.com/free-icon/minus-big-symbol_318-70354.jpg?size=338&ext=jpg";
        console.log(img);
    }

    //creating map
    var map =[];

    function setMap() {
        for (var i = 0; i < rows; i++) {
            var arr = [];
            map.push(arr);
            for (var o = 0; o < cols; o++) {
                var selectImg = (i % 2 == 0) ? 0 : 1;    //select your image based on row
                map[i].push(new box(selectImg));
            }
          cols = (cols < 8) ? cols + 1 : cols;
        }
    }

    console.log(map)

    //rendering map
    function render() {
        for (var i = 0; i < rows; i++) {

          for (var x = 0; x < map[i].length; x++) {
          var tile = map[i][x];
                tile.xaxis *= x;
                tile.yaxis += (i*64);

                var img = new Image();
                img.onload = (function(x,y) {
                     return function() {
                        surface.drawImage(this, x, y, 64, 64);
                        }

                })(tile.xaxis, tile.yaxis);

                img.src = tile.src;
            }
        }
    }

    setMap();
    render();