canvas繪製本月日曆，效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
html,body{
margin :0 0;
padding: 0 0;
width: 100%;
height: 100%;
}
</style>
<body>
<canvas id="cav" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("cav");
var ctx = canvas.getContext("2d");
var date = new Date();
var year = date.getYear();
var mouth = date.getMonth();
var today = date.getDate();
var week = date.getDay();
var mouth = 5;
var today = 23;
var week = 6;
var cardSize = 50 ;
var array_three = [4,6,9,11];
var array_threeone = [1,3,5,7,8,10,12];
var array_week = ["日","一","二","三","四","五","六"]
var firstDraw ;//1號繪製位置
var wIdx = today % 7 ;
if(week >= wIdx){
firstDraw = week - wIdx + 1;
}else{
firstDraw = week - wIdx + 8;
}
var dayIndex = 1;
var countDay = 30 ;
if(array_three.indexOf(mouth) > -1){
countDay = 30;
}else if(array_threeone.indexOf(mouth) > -1){
countDay = 31 ;
}else{
countDay = 28 ;//未考慮瑞年情況
}
var row = 6;
if(7 - firstDraw + 7 * 4 < countDay){//確定表格行數，防止日期繪製不全
row = 7;
}
/*繪製背景表格*/
function drawbg(){
for (var i = 0; i < row; i++) {
for (var j = 0; j < 7; j++) {
ctx.strokeRect(j * cardSize , i * cardSize, cardSize , cardSize);
}
}
}
drawbg();
for (var i = 0; i < row; i++) {//開始繪製日期數
for (var j = 0; j < 7; j++) {
if( i == 0){//表格第一行繪製星期
drawDate(array_week[j],i,j);
continue;
}
if(i == 1 && j < firstDraw){//確定1號繪製位置
continue;
}
if(dayIndex > countDay){//只繪製月份的天數
break;
}
drawDate(dayIndex ++ ,i,j);
}
}
/*繪製確定日期*/
function drawDate(txt,i,j){
if(txt == today){
drawTodaybg(j,i);
}
ctx.textAlign = "center";
ctx.font = (cardSize / 2) + 'px Arial';
ctx.fillText(txt, j * cardSize + cardSize / 2 , i * cardSize + cardSize / 3 * 2 );
}
/*繪製標誌今天的背景圖*/
function drawTodaybg(i,j){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(i * cardSize + cardSize / 2,j * cardSize + cardSize / 2, cardSize / 2 - 10 ,- Math.PI ,Math.PI * 0.5);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(i * cardSize + cardSize / 2,j * cardSize + cardSize / 2, cardSize / 2 - 9 ,- Math.PI ,Math.PI * 0.4);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(i * cardSize + cardSize / 2,j * cardSize + cardSize / 2, cardSize / 2 - 8 ,- Math.PI ,Math.PI * 0.3);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(i * cardSize + cardSize / 2,j * cardSize + cardSize / 2, cardSize / 2 - 7 ,- Math.PI ,Math.PI * 0.2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(i * cardSize + cardSize / 2,j * cardSize + cardSize / 2, cardSize / 2 - 6 ,- Math.PI ,Math.PI * 0.1);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
</script>
</html>