码迷,mamicode.com
首页 > 其他好文 > 详细

【canvas】绘制一个数字时钟

时间:2019-10-01 16:45:45      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:cti   sep   圆心   etc   速度   结束   path   var   宽度   

使用canvas绘制一个数字时钟

基础内容

下面是此案例中会使用到的一些绘图API

//获取绘图上下文
var ctx = canvas.getContext(‘2d‘);

//绘制直线
ctx.moveTo(100, 100);
ctx.lineTo(700, 700);

//绘制曲线
ctx.arc(
centerx, centery, radius, //圆心的坐标以及半径的值
startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束
anticlockwise=false //顺时针还是逆时针,默认是顺时针false
)

//控制样式
ctx.lineWidth = 5;
ctx.strokeStyle = ‘blue‘;
ctx.fillStyle = ‘blue‘;

//绘制路径
ctx.stroke();
//填充
ctx.fill();
    
//开启路径
ctx.beginPath();
//结束路径
ctx.closePath();

//清除canvas的某块区域
ctx.clearRect(x,y,width,height)

代码部分

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
    }
    #canvas {
      margin: 0 auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./digit.js"></script>
  <script src="./countdown.js"></script>
</body>
</html>

js部分

var WINDOW_WIDTH = 1024; // 屏幕宽度
var WINDOW_HEIGHT = 600; // 屏幕高度
var RADIUS = 8; //半径
var MARGIN_TOP = 60; //起始位置Y
var MARGIN_LEFT = 30; //起始位置X

var balls = []; // 记录小球
var colors = [‘red‘, ‘yellow‘, ‘#000‘, ‘#453‘]

var date = new Date();
var nowhours = date.getHours(),
  nowminutes = date.getMinutes(),
  nowseconds = date.getSeconds();

//渲染
function render(cxt) {
  //刷新之前的canvas
  cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
  var date = new Date();
  var hours = nowhours,
    minutes = nowminutes,
    seconds = nowseconds;

  //渲染点阵
  renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
  renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
  renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
  renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
  renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
  renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
  renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
  renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

  // 渲染运动的小球
  for (var i = 0; i < balls.length; i++) {
    cxt.fillStyle = balls[i].color;
    cxt.beginPath();
    cxt.arc(balls[i].x,balls[i].y, RADIUS, 0, 2 * Math.PI)
    cxt.closePath()
    cxt.fill()
  }
}

//点阵的转换
function renderDigit(x, y, num, cxt) {
  cxt.fillStyle = "rgb(0,102,153)";
  for (var i = 0; i < digit[num].length; i++)
    for (var j = 0; j < digit[num][i].length; j++)
      if (digit[num][i][j] == 1) {
        cxt.beginPath();
        cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
      }
}

//添加小球
function addBalls(x, y, num) {
  for (var i = 0; i < digit[num].length; i++) {
    for (var j = 0; j < digit[num][i].length; j++) {
      if (digit[num][i][j] == 1) {
        //添加球
        var aBall = {
          x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
          y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
          g: 1.5 + Math.random(),
          vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4, //让小球的速度多元化
          vy: 0,
          color: colors[Math.floor(Math.random() * colors.length)]
        }
        balls.push(aBall);
      }
    }
  }
  //性能优化,清除不符合条件的小球
  balls = balls.filter((item)=>{
    return item.x+RADIUS > 0 && item.x-RADIUS<WINDOW_WIDTH
  })

  // var cnt = 0;
  // for (var i = 0; i < balls.length; i++) {
  //   if (balls[i].x+RADIUS > 0 && balls[i].x-RADIUS<WINDOW_WIDTH) {
  //     balls[cnt++] = balls[i]
  //   }
  // }
  // while(balls.length > Math.min(300,cnt)) {
  //   balls.pop();
  // }
  // console.log(balls.length)
}
//更新小球变化
function updataBalls() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].x += balls[i].vx;
    balls[i].y += balls[i].vy;
    balls[i].vy += balls[i].g;
    if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
      balls[i].y = WINDOW_HEIGHT - RADIUS;
      balls[i].vy = -balls[i].vy * 0.5;
    }
  }
}

function updata() {
  var seconds = new Date().getSeconds();
  if (seconds != nowseconds) {
    // 添加球
    addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10))
    nowseconds = seconds;
  }
  //更新球的变化
  updataBalls();
}

window.onload = function () {
  //自适应
  WINDOW_WIDTH = document.documentElement.clientWidth;
  WINDOW_HEIGHT = document.documentElement.clientHeight;
  MARGIN_LEFT = WINDOW_WIDTH/10;
  RADIUS =  Math.round(WINDOW_WIDTH*4/5/108)-1;
  var canvas = document.getElementById(‘canvas‘);
  var context = canvas.getContext("2d");
  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;

  setInterval(function () {
    //渲染
    render(context);
    //更新
    updata();
  }, 100);
}

点阵图

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

 

【canvas】绘制一个数字时钟

标签:cti   sep   圆心   etc   速度   结束   path   var   宽度   

原文地址:https://www.cnblogs.com/Ingots/p/11615474.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!