Javascript 我怎样才能画一个“a”；菱形'；"；围绕点在栅格中形成形状_Javascript_2d_Processing_P5.js

Javascript 我怎样才能画一个“a”；菱形'；"；围绕点在栅格中形成形状

javascript processing

Javascript 我怎样才能画一个“a”；菱形'；"；围绕点在栅格中形成形状,javascript,2d,processing,p5.js,Javascript,2d,Processing,P5.js,我为这个问题挣扎了好几天，但我无法理解背后的逻辑。我有一个10x10的网格，在x=5y=5的位置有一个正方形，就像在我知道如何在这个正方形上画图，范围是2，就像这样代码示例： const pos = {x: 5, y: 5}; const range = 2; // Range can vary const square = [...] // Square is an array of positions like [{x: 0, y: 0}, {x: 1, y: 0} ...] f

我为这个问题挣扎了好几天，但我无法理解背后的逻辑。我有一个10x10的网格，在x=5y=5的位置有一个正方形，就像在

我知道如何在这个正方形上画图，范围是2，就像这样

代码示例：

const pos = {x: 5, y: 5};
const range = 2; // Range can vary
const square = [...] // Square is an array of positions like [{x: 0, y: 0}, {x: 1, y: 0} ...]

for ... {
    if (pos.x - range <= square[i].x && pos.x + range >= square[i].x &&
        pos.y - range <= square[i].y && pos.y + range >= square[i].y) {
        fill("red");
        square(square[i].x * 10,
           square[i].y * 10,
           10);
    }
}

constpos={x:5，y:5}；
常数范围=2；//范围可能会有所不同
const square=[…]//square是一个位置数组，如[{x:0，y:0}，{x:1，y:0}…]
对于{
如果（位置x-范围=平方[i].x&&
位置y-范围=平方[i].y）{
填充（“红色”）；
正方形（正方形[i].x*10，
平方[i].y*10，
10);
}
}

我正试图达到想要的效果，但我不知道如何才能达到

此解决方案是解决问题的超级简单的方法。它涉及到使用一个以10 X 10的数字网格排列的数组。网格上的0表示要绘制白色正方形的所有位置。网格上的1表示我们要绘制红色正方形的所有位置。网格上的2表示我们想要绘制蓝色正方形的所有位置。不需要知道x点和y点的相对值或范围值。您所需要做的就是更改0、1和2在网格上的位置，该函数将绘制您想要的图案

代码如下所示：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
/* 
 * The grid is a 10 by 10 array of numbers. 
 * The 0s represent all the spots where you want a white square. 
 * The 1s represent all the spots where you want a red square.
 * The 2s represent all the spots where you want a blue square(the middle spot in this case)
 */  
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
function drawSquares(grid)
{ 
    grid.forEach((row,rowIndex) => 
    {
        row.forEach((square,squareIndex) => 
        {   
            switch(square)
            {
                case 1: //if the grid value is a 1, draw a red square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "red";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";  
                    ctx.stroke();
                    break;
                case 2: //if the grid value is a 2, draw a blue square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "blue";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break;
                case 0: //if the grid value is a 0, draw a white square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "white";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break; 
            } 
        }); 
    });   
}
drawSquares(grid);
</script>  
</body>
</html>

代码如下所示：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
/* 
 * The grid is a 10 by 10 array of numbers. 
 * The 0s represent all the spots where you want a white square. 
 * The 1s represent all the spots where you want a red square.
 * The 2s represent all the spots where you want a blue square(the middle spot in this case)
 */  
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
function drawSquares(grid)
{ 
    grid.forEach((row,rowIndex) => 
    {
        row.forEach((square,squareIndex) => 
        {   
            switch(square)
            {
                case 1: //if the grid value is a 1, draw a red square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "red";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";  
                    ctx.stroke();
                    break;
                case 2: //if the grid value is a 2, draw a blue square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "blue";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break;
                case 0: //if the grid value is a 0, draw a white square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "white";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break; 
            } 
        }); 
    });   
}
drawSquares(grid);
</script>  
</body>
</html>

字段到

位置的距离必须小于范围
。创建嵌套循环并遍历每个字段。计算x和y方向上的距离（dx
，dy）。用于计算绝对距离。评估dx
和dy
之和是否小于或等于范围
：
for（设i=0；i<10；++i）{
对于（设j=0；j<10；++j）{
设dx=abs（位置x-i）；
设dy=abs（位置y-j）；
如果（dx+dy字段到pos
的距离必须小于range
。创建嵌套循环并在每个字段中运行。计算x和y方向的距离（dx
，dy）.用于计算绝对距离。计算dx
和dy
之和是否小于或等于range
：
for（设i=0；i<10；++i）{
对于（设j=0；j<10；++j）{
设dx=abs（位置x-i）；
设dy=abs（位置y-j）；
if（dx+dy）
//Example 2: 
//To achieve your first result,the grid is changed as follows:
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,2,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
drawSquares(grid);//after the function call, the result is as shown below