javascript - 在 Canvas 上进行布局

Question

我是游戏开发的初学者(我正在使用 JS 进行开发)，我有一个关于如何在 Canvas 中生成类似于 billar 球(图像)的布局的问题

谢谢!

抱歉，我的问题解释不正确

真正的问题是:如何生成这种三 Angular 形或金字塔形状的网格或图案，无论图形在三 Angular 形或金字塔内部。

我的游戏是啤酒乒乓球，所以三 Angular 形或金字塔内的图形是塑料杯，每个级别都会有更多:

1级:2个塑料杯

2级:3个塑料杯

级别x:x个塑料杯

Answer 1

每个圆都位于等边三 Angular 形的顶点处。每条边的长度是半径的2倍，内 Angular 是60度

查找方位( Angular )和距离的位置

var x = Math.cos(angle) * distance;
var y = Math.sin(angle) * distance;

Angular 以弧度为单位，我假设您知道如何使用弧度。

因此从 x,y 处的一个圆开始

var ctx = can.getContext("2d");
var x = 100
var y = 60
var radius = 50;
var r = radius; // to save typing

ctx.beginPath();

// draw first 3 circles
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.moveTo(x + r * 3,y);       // Move the path to the start of the next 
                               // circle to the right of the first.
                               // Circles start their path at the 3oclock mark
                               // The second last argument 0 (Radians) and goes around
                               // clock wise to Math.PI * 2 (360Deg)
                               // 0 is the start bearing for the canvas
                               // going right along the x axis
ctx.arc(x + r * 2,y,r,0,Math.PI * 2);  // Draw the next circle 2*radius right of the first
ctx.moveTo(x + r * 5,y);       // move to start of 3rd circle
ctx.arc(x + r * 4 ,y,r,0,Math.PI * 2);  // draw the circle on the far right 
                                        // of the first row

// now find the next row which is on the line at 60 deg from the first and 2 * the radius
x += Math.cos(Math.PI / 3) * r * 2; // Math.PI / 3 is 60 deg (1 third of 180)
y += Math.sin(Math.PI / 3) * r * 2;

// draw the next two
ctx.moveTo(x + r,y);
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.moveTo(x + r * 3,y);
ctx.arc(x + r * 2,y,r,0,Math.PI * 2);

// and find the location of the last circle
x += Math.cos(Math.PI / 3) * r * 2;
y += Math.sin(Math.PI / 3) * r * 2;
ctx.moveTo(x + r,y);
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.lineWidth = 2;
ctx.stroke()

canvas { border : 2px black solid;}

<canvas id="can" width = 400 height = 300></canvas>

或者将其全部放入可以执行任何大小的函数中

var ctx = can.getContext("2d");

function strokeCircle(x,y,r){  // position x,y and radius
    ctx.beginPath(); 
    ctx.moveTo(x + r,y); 
    ctx.arc(x,y,r,0,Math.PI * 2); 
    ctx.stroke(); 
}

// baseCount is number of circles across the top
// x,y is position of top left most circle
// r is radius
function drawCirclePyramid(baseCount,x,y,r){
    for(var i = 0; i < baseCount; i++){
        for(j = 0; j < baseCount - i; j++){
            strokeCircle(x + j * r * 2, y, r);  // big circle
            strokeCircle(x + j * r * 2, y, r * 0.2); // small inner circle
        }
        x += Math.cos(Math.PI / 3) * r * 2;  // move to next row
        y += Math.sin(Math.PI / 3) * r * 2;
    }
}

ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
drawCirclePyramid(2,30,30,30);
drawCirclePyramid(3,160,30,30);
drawCirclePyramid(4,20,140,15);
drawCirclePyramid(5,160,200,15);

    canvas { border : 2px black solid;}

    <canvas id="can" width = 350 height = 330></canvas>