登录 注册

Vanessa Li

Vanessa 前端 宝妈
关注
2 号成员，2012-11-24 16:19:56 加入
19.7k
个人主页 浏览
12.6k
帖子 + 回帖 + 评论
205.4k
贡献点
10798h28m
在线时长
我们终此一生，就是要摆脱他人的期待，找到真正的自己。
  • Vanessa •
    [红包]
  • Vanessa •

    http://vditor.b3log.org/demo/ 终于完成 vditor demo。发个红包庆祝下

  • Vanessa •

    image.png

  • Vanessa •

    今天单个红包可以发 520 哦

  • Vanessa •

    废了我好久时间，打码去了

  • Vanessa •

    他这个都没有开头，连日记都不如

  • Vanessa •

    红包应该可以做成个链接，到处发

  • Vanessa •

    感人之点在结尾，但是这种人应该不值得被原谅。

  • Vanessa •

    我看完了

  • Vanessa •

    image.png

  • Vanessa •

    求地址，我要去吃瓜

  • Vanessa •

    trollface

  • Vanessa •

    把两段连起来就可以两

  • Vanessa • 
     Confetti.prototype.render = function render(now) {
    var progress = this.progress.tick(now);

    this.canvas.width = this.width;
    this.canvas.height = this.height;

    for (var i = 0; i < this.length; ++i) {
      this.ctx.save();
      this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange));
      this.ctx.rotate(this.sprites[i].rotation);
      this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT);
      this.ctx.restore();
    }

    requestAnimationFrame(this.render);
  };

  _createClass(Confetti, null, [{
    key: "CONST",
    get: function get() {
      return {
        SPRITE_WIDTH: 9,
        SPRITE_HEIGHT: 16,
        PAPER_LENGTH: 100,
        DURATION: 8000,
        ROTATION_RATE: 50,
        COLORS: ["#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#42A5F5", "#29B6F6", "#26C6DA", "#26A69A", "#66BB6A", "#9CCC65", "#D4E157", "#FFEE58", "#FFCA28", "#FFA726", "#FF7043", "#8D6E63", "#BDBDBD", "#78909C"]
      };
    }
  }]);

  return Confetti;
}();

(function () {
  var DURATION = 8000,
      LENGTH = 120;

  new Confetti({
    width: window.innerWidth,
    height: window.innerHeight,
    length: 120,
    duration: 8000
  });;
})();</script>
</body>
  • Vanessa • 
    <body>
<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 Progress = function () {
  function Progress() {
    var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

    _classCallCheck(this, Progress);

    this.timestamp = null;
    this.duration = param.duration || Progress.CONST.DURATION;
    this.progress = 0;
    this.delta = 0;
    this.progress = 0;
    this.isLoop = !!param.isLoop;

    this.reset();
  }

  Progress.prototype.reset = function reset() {
    this.timestamp = null;
  };

  Progress.prototype.start = function start(now) {
    this.timestamp = now;
  };

  Progress.prototype.tick = function tick(now) {
    if (this.timestamp) {
      this.delta = now - this.timestamp;
      this.progress = Math.min(this.delta / this.duration, 1);

      if (this.progress >= 1 && this.isLoop) {
        this.start(now);
      }

      return this.progress;
    } else {
      return 0;
    }
  };

  _createClass(Progress, null, [{
    key: "CONST",
    get: function get() {
      return {
        DURATION: 1000
      };
    }
  }]);

  return Progress;
}();

var Confetti = function () {
  function Confetti(param) {
    _classCallCheck(this, Confetti);

    this.parent = param.elm || document.body;
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = param.width || this.parent.offsetWidth;
    this.height = param.height || this.parent.offsetHeight;
    this.length = param.length || Confetti.CONST.PAPER_LENGTH;
    this.yRange = param.yRange || this.height * 2;
    this.progress = new Progress({
      duration: param.duration,
      isLoop: true
    });
    this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange : 10;
    this.speedRange = typeof param.speedRange === "number" ? param.speedRange : 10;
    this.sprites = [];

    this.canvas.style.cssText = ["display: block", "position: absolute", "top: 0", "left: 0", "pointer-events: none"].join(";");

    this.render = this.render.bind(this);

    this.build();

    this.parent.append(this.canvas);
    this.progress.start(performance.now());

    requestAnimationFrame(this.render);
  }

  Confetti.prototype.build = function build() {
    for (var i = 0; i < this.length; ++i) {
      var canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");

      canvas.width = Confetti.CONST.SPRITE_WIDTH;
      canvas.height = Confetti.CONST.SPRITE_HEIGHT;

      canvas.position = {
        initX: Math.random() * this.width,
        initY: -canvas.height - Math.random() * this.yRange
      };

      canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange;
      canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2);

      ctx.save();
      ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0];
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();

      this.sprites.push(canvas);
    }
  };
  • Vanessa •

    @233333 这个 js 要有钱才能看见。记得捐赠完不要刷页面，直接看。

  • Vanessa •
    [红包]
  • Vanessa •

    @PeterChu 幸苦了，不行就放弃吧

  • Vanessa •

    好好努力，别在这瞎混了，我改 bug 去了。

  • Vanessa •
    [红包]
  • Vanessa •

    @88250 发现垃圾数据。红包应该至少发 2 个

  • Vanessa •

    wulian

  • Vanessa •

    谁提的红包功能？站出来。害的我昨晚 2 点才睡。

  • Vanessa •

    不玩了

  • Vanessa •
    [红包]
  • Vanessa •
    [红包]
  • Vanessa •
    [红包]
  • Vanessa •

    捡漏了 8 个红包

  • Vanessa •

    好吧，我的能力只能如此了。你们自己想去

  • Vanessa •
    [红包]