用兩個符號構造一個三角形圖案

Question

我知道如何用單個符號構造上述三角形。

我不明白如何將我的代碼更改爲使用兩個符號。

Answer 1

您的問題，可以使用多種不同的解決方案來解決......

對於它的赫克，這裏是我將如何使用它的畫布，創建圖像做（複製/粘貼和調整an answer I gave to another SO user yesterday .. ）。這個解決方案可能不適合你的需求，但是再次如Jishnu V S所說的，你沒有給我們任何幫助。

PS：是的，我知道，WAY矯枉過正比較簡單的HTML列表...哦的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();