canvas實現的絢麗的電子時鐘效果

admin發表於2017-02-10

本章節分享一段程式碼例項，它實現了絢麗的電子時鐘效果。

當電子時鐘在走動的時候，會出現離子狀散落效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id="canvas" width="1024" height="500" style="margin:0 auto;border-bottom:1px solid #aaa;"></canvas>
<script>
// 數字矩陣
var 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]
    ] //:
  ];
 
var RADIUS = 6;
var MARGIN_TOP = 100;
var MARGIN_LEFT = 50;
var ballColors = ["#9f90cd", "#ddd", "#af672d", "#aaafff", "yellow", "#0912af", "pink", "#346a231", "#a91eed"];
var balls = [];
var curDate;
/** 繪製數字
  * @param  ctx繪圖上下文
  * @param  x座標軸
  * @param  y座標軸
  * @param  num數字
*/
var draw = function (ctx, x, y, num) {
  var points = digit[num];
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points<i>.length; j++) {
      if (points<i>[j] == 1) {
        ctx.beginPath();
        ctx.arc(x + j * (RADIUS * 2 + 1), y + i * (RADIUS * 2 + 1), RADIUS, 0, 2 * Math.PI);
        ctx.fillStyle = "#aaa";
        ctx.fill();
      }
    }
  }
}
var ball = {
  x: 512,
  y: 10,
  g: 2,
  vx: -4,
  vy: 0,
  color: "#a368dc"
};
// 渲染時鐘
var renderClock = function (context) {
  var date = new Date();
  var HOUR = date.getHours();
  var MINUTE = date.getMinutes();
  var SECOND = date.getSeconds();
 
  draw(context, MARGIN_LEFT, MARGIN_TOP, parseInt(HOUR / 10));
  draw(context, MARGIN_LEFT + 1 * 18 * RADIUS, MARGIN_TOP, HOUR % 10);
  draw(context, MARGIN_LEFT + 2 * 18 * RADIUS, MARGIN_TOP, 10);
  draw(context, MARGIN_LEFT + 3 * 18 * RADIUS, MARGIN_TOP, parseInt(MINUTE / 10));
  draw(context, MARGIN_LEFT + 4 * 18 * RADIUS, MARGIN_TOP, MINUTE % 10);
  draw(context, MARGIN_LEFT + 5 * 18 * RADIUS, MARGIN_TOP, 10);
  draw(context, MARGIN_LEFT + 6 * 18 * RADIUS, MARGIN_TOP, parseInt(SECOND / 10));
  draw(context, MARGIN_LEFT + 7 * 18 * RADIUS, MARGIN_TOP, SECOND % 10);
  var nextDate = new Date();
  if (curDate.getSeconds() != nextDate.getSeconds()) {
    curDate = nextDate;
    addBalls(context, MARGIN_LEFT + 7 * 18 * RADIUS, MARGIN_TOP, curDate % 10);
    // 防止效能損耗，移去多餘的球
    var curIndex = 0;
    while (balls.length > 200) {
      balls.splice(curIndex, 1);
      curIndex++;
    }
  }
  console.log(balls.length);
}
// 加小球
var addBalls = function (context, x, y, num) {
  var points = digit[num];
  for (var i = 0; i < points.length; i++) {
    for (var j = 0; j < points<i>.length; j++) {
      if (points<i>[j] == 1) {
        var rad = parseInt(Math.random(0, 1) * 9) + 1;
        var ball = {
          x: x + j * (RADIUS * 2 + 1),
          y: y + i * (RADIUS * 2 + 1),
          color: ballColors[rad],
          vx: Math.pow(-1, j) * rad,
          vy: Math.pow(-1, j + 1) * rad,
          g: rad
        };
        balls.push(ball);
      }
    }
  }
}
// 畫小球
var renderBall = function (context) {
 
  for (var i = 0; i < balls.length; i++) {
    var ball = balls<i>;
    ball.x += ball.vx;
    ball.y += ball.vy;
    ball.vy += ball.g;
    if (ball.y > 500 - RADIUS) {
      ball.y = 500 - RADIUS;
      ball.vy = -ball.vy * 0.5;
    }
    context.beginPath();
    context.arc(ball.x, ball.y, RADIUS, 0, 2 * Math.PI);
    context.closePath();
    context.fillStyle = ball.color;
    context.fill();
  }
}
// 初始化
var init = function () {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  curDate = new Date();
  window.setInterval(function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    renderClock(context);
    renderBall(context);
  }, 50);
}
// 載入
window.onload = function () {
  init();
}
</script>
</body>
</html>

canvas實現的圓形時鐘效果
2017-02-17
Canvas
css3實現絢麗loadding載入效果
2017-03-13
CSSS3
JQuery實現絢麗的橫向下拉選單
2021-09-09
jQuery
6個絢麗時尚的前端3D效果及原始碼
2014-08-11
前端3D原始碼
Canvas 實現炫麗的粒子運動效果(粒子生成文字)
2018-01-31
Canvas
canvas實現的鐘表效果程式碼例項
2017-02-10
Canvas
canvas實現的圓形走動鐘錶效果
2017-02-21
Canvas
canvas圓形時鐘效果
2018-07-16
Canvas
canvas動態時鐘效果
2018-07-03
Canvas
canvas實現的圓形鐘錶效果程式碼例項
2017-02-10
Canvas
一個絢麗的downloading動效分析與實現！
2016-12-18
CSS3實現絢麗的飄帶樣式選單
2016-03-12
CSSS3
多角度實現有趣的時鐘效果！
2017-01-24
canvas實現漂亮的下雨效果
2018-05-21
Canvas
OneClock的翻頁時鐘效果是如何實現的
2019-03-02
css3和javascript實現的時鐘效果
2017-04-13
CSSS3JavaScript
絢麗風車loading動效分析與實現！
2019-03-02
Canvas的絢爛起點
2019-05-01
Canvas
用C做的電子時鐘程式
2012-02-22
canvas實現的雪花飄落效果
2017-02-13
Canvas
canvas實現的可愛小貓效果
2017-02-10
Canvas
canvas實現波浪效果
2020-12-26
Canvas
jQuery和css3實現的電子錶效果
2017-04-18
jQueryCSSS3
jquery和css3實現的動態時鐘效果
2017-04-18
jQueryCSSS3
canvas實現的圖片放大鏡效果
2017-02-13
Canvas
Swift如何純程式碼實現時鐘效果
2018-04-29
Swift
canvas實現的逐步成長的大樹效果
2017-02-13
Canvas
canvas實現的旋轉太極圖效果
2017-02-13
Canvas
8 款超絢麗的 jQuery 焦點圖動畫
2015-12-03
jQuery動畫
用Python實現一個實時運動的大掛鐘效果
2021-05-19
Python
10款絢麗實用的HTML5圖表動畫應用
2014-11-18
HTML動畫
實時變化的時鐘效果程式碼例項
2017-04-12
原生js實現的天小時分鐘和秒倒數計時效果
2017-03-26
JS
canvas實現的跟隨滑鼠的彩色絲帶效果
2017-02-13
Canvas
PyQt實現鐘錶效果
2013-07-03
QT
canvas實現的鋸齒效果程式碼例項
2017-02-11
Canvas
9個精巧絢麗的jQuery圖片滑塊動畫
2015-02-06
jQuery動畫
javascript圓形電子鐘錶效果程式碼例項
2017-04-12
JavaScript

canvas實現的絢麗的電子時鐘效果

相關文章