canvas实现三维空间点线旋转动画效果代码-html代码-BFW代码库

canvas实现三维空间点线旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现三维空间点线旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
  margin: 0;
  overflow: hidden;
  background: #111;
}
canvas {
  display: block;
  filter: brightness(1.1) contrast(1.1);
}
</style>

  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
  
      <script>
// Enhanced Point Class
function Point(pos) {
  this.x = pos.x - canvas.width / 2 || 0;
  this.y = pos.y - canvas.height / 2 || 0;
  this.z = pos.z || 0;
  this.cX = 0;
  this.cY = 0;
  this.cZ = 0;
  this.xPos = 0;
  this.yPos = 0;
  this.map2D();
}
Point.prototype.rotateX = function (angleX) {
  var cosX = Math.cos(angleX),
  sinX = Math.sin(angleX),
  y1 = this.y * cosX - this.z * sinX,
  z1 = this.z * cosX + this.y * sinX;
  this.y = y1;
  this.z = z1;
};
Point.prototype.rotateY = function (angleY) {
  var cosY = Math.cos(angleY),
  sinY = Math.sin(angleY),
  x1 = this.x * cosY - this.z * sinY,
  z1 = this.z * cosY + this.x * sinY;
  this.x = x1;
  this.z = z1;
};
Point.prototype.map2D = function () {
  var scale = focal / (focal + this.z + this.cZ);
  this.xPos = vpx + (this.cX + this.x) * scale;
  this.yPos = vpy + (this.cY + this.y) * scale;
};

function Line(points, color) {
  this.points = points || [];
  this.dist = 0;
  this.visiblePoints = 0;
  this.growthRate = 0.03 + Math.random() * 0.05;
  th.........完整代码请登录后点击上方下载按钮下载查看