jquery+canvas画日历 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>canvas日历</title>
  <link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.min.css" />
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="./jquery.datetimepicker.full.min.js"></script>
</head>
<style type="text/css">
  html,
  body {
    margin: 0 0;
    padding: 0 0;
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div style="padding:20px;">
    <div>
      <div style="font-weight: bold;margin-bottom:5px;">Choose Your Anniversary</div>
      <input id="datetimepicker" type="text">
    </div>

    <canvas id="cav" width="360" height="360"></canvas>
  </div>

</body>
<script type="text/javascript">
  var newDate = ''
  $('#datetimepicker').datetimepicker({
    timepicker: false,
    theme: 'dark',
    format: 'Y-m-d',
    lang: 'en'
  });
  $('#datetimepicker').on('change', function (event) {
    console.log('input', $(this).val())
    if (!newDate) {
      newDate = $(this).val()
      canvasCalendar($(this).val())
    } else {
      if ($(this).val() != newDate) {
        canvasCalendar($(this).val())
      }
    }

  })
  function initcalender () {
    newDate = new Date().getFullYear() + '-' + new Date().getMonth() + 1 + '-' + new Date().getDate()
    $('#datetimepicker').val(newDate)
    canvasCalendar(newDate)
  }

  var canvas = document.getElementById("cav");
  var ctx = canvas.getContext("2d");
  var date = ''
  var year = ''
  var mouth = ''
  var today = ''
  var week = ''
  var cardSize = 40;

  initcalender()
  function canvasCalendar (val) {
    if (canvas && canvas.width) {
      canvas.width = canvas.width
    }


    date = new Date(val);
    year = date.getYear();
    mouth = date.getMonth();
    today = date.getDate();
    week = date.getDay();

    var array_three = [4, 6, 9, 11];
    var array_threeone = [1, 3, 5, 7, 8, 10, 12];
    var array_week = ['', "S", "M", "T", "W", "T", "F", "S"]

    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 = 7;//6;
    if (7 - firstDraw + 7 * 4 < countDay) {//确定表格行数，防止日期绘制不全
      row = 8;//7;
    }
    for (var i = 1; i < row + 1; i++) {//开始绘制日期数
      for (var j = 1; j < 8; j++) {
        if (i == 1) {//绘制年月位置
          drawMonYear();
          continue;
        }
        if (i == 2) {//表格第一行绘制星期
          drawDate(array_week[j], i, j);
          continue;
        }

        if (i == 3 && j < firstDraw) {//确定1号绘制位置
          continue;
        }

        if (dayIndex > countDay) {//只绘制月份的天数
          break;
        }

        drawDate(dayIndex++, i, j);
      }
    }
  }

  /*绘制年月*/
  function drawMonYear () {
    var mouth = date.getMonth();
    ctx.textAlign = "center";
    ctx.font = 'bold 20px serif';
    ctx.fillStyle = 'black';
    var monArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
    ctx.fillText(monArr[mouth], 2.5 * cardSize + cardSize / 2, 1 * cardSize + cardSize / 3 * 2);
    ctx.font = ' 18px Open Sans,Arial,Helvetica,sans-serif';
    ctx.fillText(date.getFullYear(), 5.3 * cardSize + cardSize / 2, 1 * cardSize + cardSize / 3 * 2);
  }
  /*绘制背景表格*/
  function drawbg (ctx) {
    for (var i = 0; i < row; i++) {
      for (var j = 0; j < 7; j++) {
        ctx.strokeRect(j * cardSize, i * cardSize, cardSize, cardSize);
      }
    }
  }




  /*绘制确定日期*/
  function drawDate (txt, i, j) {
    if (txt == today) {
      drawHeartbg(j, i);
    }

    ctx.textAlign = "center";
    if (i == 1) {
      ctx.font = 'bold 18px serif';
    } else {
      ctx.font = 'bold 14px Open Sans,Arial,Helvetica,sans-serif';
    }

    ctx.strokeStyle = 'black';
    ctx.fillText(txt, j * cardSize + cardSize / 2, i * cardSize + cardSize / 3 * 2);
  }
  /*绘制标志今天的背景图爱心*/
  function drawHeartbg (i, j) {
    ctx.save();
    var percision = 100;
    var vertices = new Array();//存放爱心坐标数组
    for (var ii = 0; ii < percision; ii++) {
      var t = Math.PI * 2 * (ii / percision - 0.5);
      var tx = 12 * Math.sin(t) - 4 * Math.sin(3 * t);
      var ty = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
      vertices.push({ x: tx, y: -ty });
    }
    ctx.beginPath();
    ctx.translate(i * cardSize + cardSize / 2, j * cardSize + cardSize / 2);
    //ctx.rotate(Math.PI);
    ctx.scale(1.2, 1.2); //缩放
    vertices.forEach(element => {
      ctx.lineTo(element.x, element.y); //绘制轮廓
    });

    ctx.stroke()


    ctx.restore();


  }


</script>

</html>

　　

posted @ 2022-03-01 09:17  枫若  阅读(114)  评论(0)    收藏  举报