时间戳

首页 > 解决方案 > 在javascript中使用画布，用矩形制作一个菱形对象

javascript - 在javascript中使用画布，用矩形制作一个菱形对象

问题描述

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

项目中的菱形

这是我到目前为止得到的：

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>

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

标签： javascripthtmlcanvashtml5-canvas

解决方案

使用二维数组

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

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

例子。

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>

推荐阅读