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

代码语言:html

所属分类:其他

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

代码标签: 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(num.........完整代码请登录后点击上方下载按钮下载查看

网友评论0