canvas三维钢管交互生长动画效果代码-html代码-BFW代码库

canvas三维钢管交互生长动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas三维钢管交互生长动画效果代码，拖动鼠标试试

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #222;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	cursor: crosshair;
	filter: sepia(100%);
}
</style>




</head>

<body>
  <canvas></canvas>

  
      <script>
"use strict";

///////////////////////////////////////////////////////////

const canvas = {
  init() {
    this.elem = document.querySelector("canvas");
    this.resize();
    window.addEventListener("resize", () => this.resize(), false);
    return this.elem.getContext("2d");
  },
  resize() {
    this.width = this.elem.width = this.elem.offsetWidth;
    this.height = this.elem.height = this.elem.offsetHeight;
  },
  clear() {
    ctx.clearRect(0, 0, this.width, this.height);
  } };


///////////////////////////////////////////////////////////

const pointer = {
  x: 100,
  y: 200,
  init() {
    window.addEventListener("mousemove", e => this.move(e), false);
    canvas.elem.addEventListener("touchmove", e => this.move(e), false);
  },
  move(e) {
    let touchMode = e.targetTouches,
    pointer;
    if (touchMode) {
      e.preventDefault();
      pointer = touchMode[0];
    } else pointer = e;
    this.x = pointer.clientX;
    this.y = pointer.clientY;
  } };


///////////////////////////////////////////////////////////////

const Node = class {
  constructor() {
    .........完整代码请登录后点击上方下载按钮下载查看