Question

刚开始在javascript中使用canvas。一般来说也是Javascript的新手。但到目前为止它真的很有趣，但在这里和那里都有一些问题...... 所以我想要做的是：用户选择要绘制的圆圈数量，最多为20max ish。然后圆圈就像这样绘制。如果用户选择6个圆圈：
O
OO
OOO;

到目前为止，我已经创建了用户输入数字的框，以及用于绘制圆形的脚本。但是不能真正弄清楚其余的......感谢任何帮助！如果你想让我发送我的代码，我可以这样做，即使它可能是一团糟...... xD

Answer 1

function draw(max){
  let y = 0, x= 0, perRow = 1;
  while(max--){
    if(x >= perRow){
     y++; perRow++; x = 0;
    }
    drawCircle(x,y);
    x++
  }
}

每当用户输入一个数字时，调用draw并定义一个绘制圆形的函数drawCircle（x | y）

Answer 2

我会从实际绘图的代码中分割出用于计算基本坐标的代码：

首先生成一个以左上角的行数和列数表示的坐标数组：三角形的概念是列数永远不会大于行数。
然后将半径应用于该列表以生成圆心的实际画布坐标，并使用该信息绘制它们：

在这里试试：

＆＃13;

function triangleCoordinates(n) {
    const result = [];
    let y = 0, 
        startX = 0;    
    for (let i = 0; i < n; i++) {
        if (i - startX > y) {
            startX = i;
            y++;
        }
        result.push([i - startX, y]);
    }
    return result;
}

function drawCircle(ctx, x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.stroke(); 
}

const ctx = canvas.getContext("2d"),
    RADIUS = 7,
    PADDING = 1;

inputCount.oninput = function () {    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (const [x, y] of triangleCoordinates(+this.value)) {
        drawCircle(ctx, (x*2+1)*(RADIUS+PADDING), (y*2+1)*(RADIUS+PADDING), RADIUS);
    }
}

＆＃13;

Number of circles: <input id="inputCount"><br>
<canvas id="canvas"></canvas>

＆＃13;

如何绘制x用户拒绝的圈子？

2 个答案: