首页 > 其他分享 >html--龟派气功

html--龟派气功

时间:2024-05-30 10:29:49浏览次数:18  
标签:function 龟派 -- object ctx value html radius var


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
  background: #000;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

canvas.interactive {
  cursor: none;
}
  </style>
 </HEAD>

 <BODY>
   <canvas id="canvas"></canvas>
   <script>
   var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Canvas = function () {
  function Canvas(element, ctx, w, h) {
    _classCallCheck(this, Canvas);

    this.element = element;
    this.ctx = ctx;
    this.width = w;
    this.height = h;

    this.interactive = false;
    this.playing = true;

    this.point = {
      value: 150,
      speed: 0.25,
      limit: 70,
      floor: 10,
      up: true,
      animating: false
    };

    this.multiplier = {
      value: 1,
      speed: 0.005,
      limit: 20,
      floor: 1,
      up: true,
      animating: true
    };

    this.center = {
      x: w / 2,
      y: h / 2,
      targetX: w / 2,
      targetY: h / 2,
      easing: 0.02
    };

    this.radius = {
      val: h / 2.2,
      targetVal: h / 2.2,
      easing: 0.02
    };

    document.body.addEventListener('click', this.click.bind(this));
    document.body.addEventListener('mousemove', this.move.bind(this));
    document.body.addEventListener('keyup', this.keyup.bind(this));

    this.hue = 160;
  }

  _createClass(Canvas, [{
    key: 'click',
    value: function click(e) {
      this.interactive = !this.interactive;

      if (!this.interactive) {
        this.center.targetX = this.width / 2;
        this.center.targetY = this.height / 2;
        this.radius.targetVal = this.height / 2.2;

        this.element.classList.remove('interactive');
      } else {
        this.element.classList.add('interactive');
      }
    }
  }, {
    key: 'move',
    value: function move(e) {
      if (!this.interactive) {
        return;
      }

      var h3 = this.height / 3;

      this.center.targetX = e.pageX;
      this.center.targetY = Math.max(e.pageY, h3);

      this.radius.targetVal = h3 + e.pageY * 0.8;
    }
  }, {
    key: 'keyup',
    value: function keyup(e) {
      if (e.which != 32) {
        return;
      }

      this.playing = !this.playing;

      if (this.playing && this.drawLoop) {
        this.drawLoop();
      }
    }
  }, {
    key: 'update',
    value: function update() {
      this.clear();

      this.animate(this.point);
      this.animate(this.multiplier);
      this.ease(this.center);
      this.ease(this.radius);

      this.hue += 0.3;

      var h = this.hue % 360;

      this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)';
      this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)';
      this.ctx.globalCompositeOperation = 'lighter';
    }
  }, {
    key: 'clear',
    value: function clear() {
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'rgba(0,0,0,0.1)';
      this.ctx.rect(0, 0, this.width, this.height);
      this.ctx.fill();
    }
  }, {
    key: 'draw',
    value: function draw() {
      var radius = this.radius.val;

      var w2 = this.center.x,
          h2 = this.center.y;

      this.ctx.beginPath();
      this.ctx.shadowBlur = 0;
      this.ctx.shadowColor = 'black';

      var points = this.point.value;
      var multiplier = this.multiplier.value;

      for (var p = 0; p < points; p++) {
        var t = p / points * Math.PI * 2;
        var t2 = p * multiplier / points * Math.PI * 2;
        var x = radius * Math.cos(t) + w2;
        var y = radius * Math.sin(t) + h2;
        var x2 = radius * Math.cos(t2) + w2;
        var y2 = radius * Math.sin(t2) + h2;

        this.ctx.moveTo(x, y);
        this.ctx.lineTo(x2, y2);
      }

      this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI);

      this.ctx.stroke();
      this.ctx.closePath();
    }
  }, {
    key: 'animate',
    value: function animate(object) {
      if (!object.animating) {
        return;
      }

      if (object.up) {
        object.value += object.speed;
      } else {
        object.value -= object.speed;
      }

      if (object.value > object.limit) {
        object.up = false;
      } else if (object.value < object.floor) {
        object.up = true;
      }
    }
  }, {
    key: 'ease',
    value: function ease(object) {
      if (object.val) {
        var dv = object.targetVal - object.val;
        object.val += dv * object.easing;

        return;
      }

      var dx = object.targetX - object.x;
      var dy = object.targetY - object.y;
      object.x += dx * object.easing;
      object.y += dy * object.easing;
    }
  }, {
    key: 'random',
    value: function random(from, to) {
      return from + Math.rand() * (to - from);
    }
  }, {
    key: 'resize',
    value: function resize(w, h) {
      this.width = w;
      this.height = h;
      this.center.targetX = w / 2;
      this.center.targetY = h / 2;

      this.radius.targetVal = h / 2.2;
    }
  }]);

  return Canvas;
}();

(function (_) {
  var canvasElement = document.getElementById('canvas'),
      ctx = canvasElement.getContext('2d');

  var w = canvasElement.width = window.innerWidth,
      h = canvasElement.height = window.innerHeight,
      density = 1;

  var canvas = new Canvas(canvasElement, ctx, w, h);

  function setup() {
    window.addEventListener('resize', resize);

    density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;

    canvasElement.width = w * density;
    canvasElement.height = h * density;

    canvas.width = w;
    canvas.height = h;
    canvas.drawLoop = draw;

    ctx.scale(density, density);

    draw();
  }

  function draw() {
    canvas.update();
    canvas.draw();

    if (canvas.playing) {
      window.requestAnimationFrame(draw);
    }
  }

  function resize() {
    w = canvasElement.width = window.innerWidth;
    h = canvasElement.height = window.innerHeight;

    canvasElement.width = w * density;
    canvasElement.height = h * density;

    canvas.resize(w, h);

    ctx.scale(density, density);
  }

  setup();
})();
   </script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

标签:function,龟派,--,object,ctx,value,html,radius,var
From: https://blog.csdn.net/stqer/article/details/139268151

相关文章

  • html--全魔乱舞
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"......
  • 你知道列存储的定义和优势以及行存储的区别?--数据仓库基本概念
    列存储(ColumnarStorage)是一种数据库存储数据的方式,它将每一列的数据存储在一起,而不是按行存储。这与传统的行存储(RowStorage)相反,后者将一行中的所有数据存储在一起。列存储的定义:列存储数据库或文件系统会将表中的每一列数据分别存储在不同的位置。例如,如果有一个表包含......
  • Hive中常用query--关联/聚合/去重/排序举例
    在Hive中,可以使用各种查询来执行关联(JOINs)、聚合(Aggregations)、去重(Distinct)和排序(Sorting)操作。以下是一些常见的查询示例:关联(JOIN):在Hive中执行关联操作通常是为了将两个或多个表中相关的行连接起来。SELECTe.name,e.salary,d.department_nameFROMemployeeseJOIN......
  • 【包邮送书】你好!C语言
    欢迎关注博主Mindtechnist或加入【智能科技社区】一起学习和分享Linux、C、C++、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关注公粽号《机器和智能》回复关键词“python项目实战......
  • 新一代爬虫平台!不写代码即可完成爬虫...
    大家好,我是Java陈序员。今天,给大家介绍一个优秀的爬虫平台,无需编写代码,只要通过简单的流程配置,即可实现爬虫。关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍spider-flow——新一代爬虫平台,以流程图的方式定义爬虫,是......
  • C#解析json的几种方式
    json格式的数据是javascript原生的一种数据格式,比xml更简洁。它有两种形式:json对象和json对象数组。 在此之前,有必要解释几个基本概念:json字符串,就是string,它一定是由双引号包起来的,如"{'name':'jerry'}"。这是一个string,尽管去掉双引号后它就是一个json对象。json对象,就是以......
  • cocos 无法设置Node layer属性
    升级到3.83之后突然无法设置Nodelayer属性,编译器打开之后无法保存1.删除temp,library文件夹后重新打开,(仍无法解决。)。原以为升级之后问他资源没有升级导致2.为什么打开prefab之后又恢复layer属性??分析原因:cocoseditor里的属性是从全局变量里读.在浏览器环境中cc是一个全......
  • css23 CSS Links, Cursors
    https://www.w3schools.com/css/css_link.asp CSSLinks  WithCSS,linkscanbestyledinmanydifferentways.StylingLinksLinkscanbestyledwithanyCSSproperty(e.g.color,font-family,background,etc.).Examplea{  color:hotpink;}&l......
  • mac,linux 查看文件编码
    查看文件编码可以通过以下几种方式:在类unix编程时,在读取文本的时候会遇到文本的编码问题,这时候就要查看文件内容的编码了,下面是查看编码的几种方式1.在Vim中可以直接查看文件编码:setfileencoding即可显示文件编码格式。如果你只是想查看其它编码格式的文件或者想解决用Vim......
  • Linux 内核启动流程
    链接脚本vmlinux.lds示例代码36.1.1vmlinux.lds链接脚本492OUTPUT_ARCH(arm)493ENTRY(stext)494jiffies=jiffies_64;495SECTIONS496{497/*498*XXX:Thelinkerdoesnotdefinehowoutputsectionsare499*assignedtoinputsectionswhentherearem......