在javascript中使用canvas，用矩形制作菱形对象

Question

我是 canvas 标签的新手，我的项目的规范是使用 canvas 构建一个像菱形一样的矩形，这些黑色边框由矩形组成（如下图所示） ):

Rhombus from project

这是我目前得到的：

var canvas=document.getElementById('cilim');
    var ctx=canvas.getContext('2d');

    for(let i=0;i<11;i++){
        ctx.beginPath();
        ctx.rect(i*50,0,50,50);
        ctx.rect(0,i*50,50,50);
        ctx.rect(i*50,10*50,50,50);
        ctx.rect(10*50,i*50,50,50);
        ctx.lineWidth=1;
        ctx.strokeStyle="lightgrey";
        ctx.stroke();
    }
    for(let i=1;i<10;i++){
        for(let j=1;j<10;j++){
            if((i+j===6) || Math.abs((i-j))===4 || (i+j)===14){
                ctx.beginPath();
                ctx.rect(i*50,j*50,50,50);
                ctx.lineWidth=2;
                ctx.strokeStyle="black";
            }else{
                ctx.beginPath();
                ctx.rect(i*50,j*50,50,50);
                ctx.lineWidth=3;
                ctx.strokeStyle="lightgrey";

            }
            ctx.stroke();
        }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cilim</title>
</head>
<body>
<canvas id="cilim" width="550px" height="550px"></canvas>
</body>
</html>

有没有其他方法可以制作这些黑色边框，我哪里出错了，或者我可以使用 canvas 中的任何其他对象来创建那种类型的菱形。欢迎任何反馈，建议。提前谢谢你。

Answer 1

使用二维数组

有很多方法可以做到这一点。最简单的也是最灵活的。

从字符串创建地图。使用字符定义内部单元格。将字符串转换为二维数组跨过每个单元格，如果单元格包含内部字符，请检查每个单元格的左侧、上方、右侧和下方。对于每条边，如果数组中该位置没有内部字符，则您知道它必须绘制一条边。

示例。

const ctx = canvas.getContext('2d'), size = 50;
const map = `..........,
.....#....,
....###...,
...#####..,
..#######.,
.#########,
..#######.,
...#####..,
....###...,
.....#....
`.split(",").map(row => [...row.trim()]);
createGrid();
outlineCells(map);
function outlineCells(map) {
    var x, y;
    ctx.lineWidth=3;
    ctx.strokeStyle = "#000";
    ctx.beginPath();
    for (y = 0; y < map.length; y++) {
        const row = map[y];
        for (x = 0; x < row.length; x++) {
            if (row[x] === "#") {
               const xx = x * size, yy = y * size;
               if (row[x - 1] !== "#") {  // left edge
                  ctx.moveTo(xx, yy + size);
                  ctx.lineTo(xx, yy);               
               }
               if (y === 0 || map[y - 1][x] !== "#") {  // top edge
                  ctx.moveTo(xx, yy);
                  ctx.lineTo(xx + size, yy);               
               }
               if (row[x + 1] !== "#") {  // right edge
                  ctx.moveTo(xx + size, yy);
                  ctx.lineTo(xx + size, yy + size);               
               }
               if (y === map.length - 1 || map[y + 1][x] !== "#") {  // top edge
                  ctx.moveTo(xx, yy + size);
                  ctx.lineTo(xx + size, yy + size);               
               }
           }
       }
    }
    ctx.stroke();
}
function createGrid() {
    ctx.strokeStyle = "lightgrey";
    ctx.beginPath();
    for(let i = 0; i < 11; i++) {
        ctx.rect(0, i * size, 11 * size, size);
        ctx.rect(i * size, 0, size, 11 * size);
   }
    ctx.stroke();
}

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

在javascript中使用canvas，用矩形制作菱形对象

Using canvas in javascript, to make a rhombus object out of rectangles

html

javascript

canvas

html5-canvas

使用二维数组

示例。