如何在P5JS中使用嵌套for循环实现2021年抽象圆点日历

实现核心逻辑 #

• 预存2021年各月天数：2021年为平年，2月有28天，按1-12月顺序存为数组直接调用即可
• 坐标适配规则：12列圆圈横向均匀排布在预留10px边距的画布区域，纵向按天数从上到下排布，每个圆圈直径为10px，圆心坐标计算严格匹配边距和画布尺寸要求
• 当前日期标记：调用p5内置的日期方法获取系统当前月、日信息，在对应位置绘制绿色圆圈覆盖底层黑色圆圈即可完成标记，若要限定仅标记2021年的日期，可新增year() === 2021的判断，避免非2021年的日期标记错位

完整可运行代码 #

// 预存2021年1-12月对应的天数
const monthDays = [31,28,31,30,31,30,31,31,30,31,30,31];
const circleSize = 10;
const margin = 10;

function setup() {
    createCanvas(140, 330);
    background(220);
}

function draw () { 
    fill(0);
    // 遍历12个月份
    for (let m = 1; m <= 12; m +=1 ) {
        // 获取当前月份的天数，数组下标从0开始所以要减1
        let numDays = monthDays[m-1];
        // 计算当前月份对应列的圆心X坐标
        let circleX = margin + circleSize/2 + (m-1)*circleSize;
        // 遍历当前月份的每一天
        for (let d = 1; d <= numDays; d += 1) {
            // 计算当天对应的圆心Y坐标
            let circleY = margin + circleSize/2 + (d-1)*circleSize;
            ellipse(circleX, circleY, circleSize, circleSize);
        }
    }
    // 绘制当前日期的绿色标记
    fill(0, 255, 0);
    let currentMonth = month();
    let currentDay = day();
    let markX = margin + circleSize/2 + (currentMonth-1)*circleSize;
    let markY = margin + circleSize/2 + (currentDay-1)*circleSize;
    ellipse(markX, markY, circleSize, circleSize);

    noLoop();
}

内容的提问来源于stack exchange，提问作者cat