巩固前端-学习绘制本月日历框

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

最近在学习前端技术，算是一名前端菜鸟。通过写小案例是巩固知识的有效方式，今天来学习绘制月度日历框，包括展示星期，红色标注出周末日期，并圈出当日日期信息。主要熟悉JavaScript中日期函数使用，以及日期计算等知识.

代码块效果展示

确定绘制区域

在HTML文件设定好绘制区域大小，定义好 id 信息供 script 调用

<canvas id="rili" class="hidden" width="600" height="600"></canvas>

此绘制区域未做特殊的样式处理

绘制日历的参数准备

首先限定好绘制区域，调用JS标准日期API获取日期信息

riliCtx.clearRect(0, 0, 600, 600);  // 限定绘制区域
var date = new Date();
var year = date.getYear();          // 年份信息
var mouth = date.getMonth();        // 月份信息
var today = date.getDate();         // 日期信息
var week = date.getDay();           // 星期

计算好不同月份的天数，星期信息供后面绘制元素使用

var array_three = [4, 6, 9, 11];      // 天数为30的月份
var array_threeone = [1, 3, 5, 7, 8, 10, 12];   // 天数为31的月份
var array_week = ["SUN", "MON", "TUES", "WED", "THUR", "FRI", "SAT"]; // 星期标识

var firstDraw;           // 绘制1号的位置
var wIdx = today % 7;    // 今天是本月的第几周

var dayIndex = 1;
var countDay = 30;

if (array_three.indexOf(mouth + 1) > -1) {
    countDay = 30;
} else if (array_threeone.indexOf(mouth + 1) > -1) {
    countDay = 31;
} else {
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) //根据闰年与否 设定2月的天数
        countDay = 29;
    else
        countDay = 28;
}

根据上述获取到的日历信息计算出本月行列数目，并绘制在限定区域。(如下图)

绘制出月份和日期信息

上一步展示日期信息的格子框已绘制完成，接着需要绘制出当前月份和日期信息

riliCtx.fillStyle = "rgb(69,68,84)";
riliCtx.font = "900 26pt SimHei";
riliCtx.textAlign = "center";
var monthCN = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
riliCtx.scale(1.1, 1);
riliCtx.fillText(monthCN[mouth] + "月", 260, 32);  // 格子框上面居中 绘制月份
riliCtx.resetTransform();

riliCtx.font = "20pt SimHei";
riliCtx.textAlign = "end";
riliCtx.fillText(today + "日", 520, 38);   // 右上角绘制当前日期

再由上述计算好的行,列数通过循环代码块将星期和日期写入到对应的格子，效果如下

标识出本日

获取到今天日期信息，与today相等则将本数据格标记展示。这里是调用方法 drawTodaybg(i，j) 绘制圆圈标记出当日，就可得到最终效果(如下)

总结

这个小案例主要就是巩固一下JS的日期相关函数。关键在于通过获取到的日期信息，计算得到当月天数进而绘制横纵方框格，最后通过比较对当前日进行标识处理。总的来说，这个小案例算是比较基础的知识点考察，通过本篇实践操作，相信应该会更熟悉。

在掘金(JUEJIN)  一起分享知识, Keep Learning!