isomer实现立体数字显示时间代码-html代码-BFW代码库

isomer实现立体数字显示时间代码

代码语言：html

所属分类：其他

代码描述：isomer实现立体数字显示时间代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body, #canvas{
  background: #191919;
}
#canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 850px;
  height: 600px;
  margin-left: 50px;
}
</style>


</head>

<body >
  <canvas id="canvas" width="1700" height="1200"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/isomer.min.js"></script>


  
      <script  >
/**
 * An animated isometric digital clock
 * by Thibault PIERRE - @T1l3 - http://thibaultpierre.com
 *
 * Generated with Isomer
 * https://jdan.github.com/isomer
 */

// Drawing
var iso = new Isomer(document.getElementById("canvas"));
var Shape = Isomer.Shape;
var Point = Isomer.Point;
var Color = Isomer.Color;
var middleX = 2;
var middleY = 6;


var drawPrism = function(prism, x , y) {
  var faces = prism.faces;
  var shape = [];
  for (var i = 0; i < faces.length; i++) {
    var number = faces[i];
    shape.push(new Shape.Prism(new Point(number[0] + x, number[1] + y - middleY, number[2]), number[3], number[4], number[5]));
  }
  iso.add(shape, prism.color);
}

// Ground
// iso.add(Shape.Prism(Point(0, 0 - middleY, 0), 5, 20, 0.1));

var drawFirstHourNumber = function() {
  drawPrism(numbers[firstHourNumber], middleX, 16);  
};
var drawSecondHourNumber = function() {
  drawPrism(numbers[secondHourNumber], middleX, 12);  
};

var drawFirstMinuteNumber = function() {
  drawPrism(numbers[firstMinuteNumber], middleX, 6);  
};

var drawSecondMinuteNumber = function() {
  drawPrism(numbers[secondMinuteNumber], middleX, 2);  
};

var drawColon = function() {
  drawPrism(colon, middleX, 10);
};

var colon = {
  faces: [
    [0, 0, 1, 1, 1, 1],
    [0, 0, 3, 1, 1, 1]
   ],
  color: new Color(40, 106, 127)
};
var numbers = {
  0: {
    faces: [
      [0, 0, 0, 1, 3, 1],
      [0, 2, 1, 1, 1, 3],
      [0, 0, 1, 1, 1, 3],
      [0, 0, 4, 1, 3, 1]
    ],
    color: new Color(59, 175, 187)
  },
  1: {
    faces: [
      [0, 1, 0, 1, 1, 5]
    ],
    color: new Color(53, 156, 167)
  },
  2: {
    faces: [
      [0, 0, 0, 1, 3, 1],
      [0, 2, 1, 1, 1, 1],
      [0, 0, 2, 1, 3, 1],
      [0, 0, 3, 1, 1, 1],
      [0, 0, 4, 1, 3, 1]
    ],
    color: new Color(48, 138, 147).........完整代码请登录后点击上方下载按钮下载查看