持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

演示部分

由来

圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。作为是圣诞节重要的组成元素之一，近代圣诞树起源于德国，后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有名的传统之一。 据说圣诞树最早出现在古罗马12月中旬的所谓农神节。现在通常人们在圣诞前后把一棵常绿植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放在树的顶上。

源码讲解

构造树体

Tree = (function() {
    function Tree(w, h, swirls) {
      this.run = __bind(this.run, this);
      var i;
      this.width = w;
      this.height = h;
      this.canvas = document.getElementById('tree');
      this.context = this.canvas.getContext('2d');
      this.canvas.width = w;
      this.canvas.height = h;
      this.swirls = (function() {
        var _i, _ref, _results;
        _results = [];
        for (i = _i = 0, _ref = swirls.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
          _results.push(new TreeSwirl(this, swirls[i], i / swirls.length));
        }
        return _results;
      }).call(this);
      this.run();
    }

画出这颗树

Tree.prototype.draw = function(t) {
      var s, _i, _j, _len, _len1, _ref, _ref1, _results;
      this.context.clearRect(0, 0, this.width, this.height);
      _ref = this.swirls;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        s = _ref[_i];
        s.drawBack(t);
      }
      _ref1 = this.swirls;
      _results = [];
      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
        s = _ref1[_j];
        _results.push(s.drawFront(t));
      }
      return _results;
    };

    return Tree;

  })();

将每种节点加到树上

TreeSwirl = (function() {
    function TreeSwirl(tree, s, offset) {
      var i;
      this.tree = tree;
      this.offset = offset;
      this.color = s.color;
      this.speed = s.speed;
      this.radius = s.radius;
      this.nodes = (function() {
        var _i, _ref, _results;
        _results = [];
        for (i = _i = 0, _ref = s.nodes; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
          _results.push(new SwirlNode(this, i / s.nodes));
        }
        return _results;
      }).call(this);
    }

对节点的设置

 TreeSwirl.prototype.drawBack = function(t) {
      var n, _i, _len, _ref, _results;
      _ref = this.nodes;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        n = _ref[_i];
        if (n.inBack(t)) {
          _results.push(n.draw(t));
        }
      }
      return _results;
    };

    TreeSwirl.prototype.drawFront = function(t) {
      var n, _i, _len, _ref, _results;
      _ref = this.nodes;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        n = _ref[_i];
        if (n.inFront(t)) {
          _results.push(n.draw(t));
        }
      }
      return _results;
    };

    return TreeSwirl;

  })();

  SwirlNode = (function() {
    function SwirlNode(swirl, offset) {
      this.swirl = swirl;
      this.offset = offset;
    }

    SwirlNode.prototype.yPos = function() {
      var d, od;
      d = this.t / 800 * this.swirl.speed;
      od = d + this.offset * this.swirl.tree.height;
      return (this.swirl.tree.height - od % this.swirl.tree.height) % this.swirl.tree.height;
    };

    SwirlNode.prototype.xDeg = function() {
      return this.yPos() * 5 + 100 * this.swirl.offset;
    };

    SwirlNode.prototype.xRad = function() {
      return this.xDeg() * Math.PI / 60;
    };

    SwirlNode.prototype.xPos = function() {
      return Math.sin(this.xRad()) * this.swirl.tree.width * this.yPos() / this.swirl.tree.height / 3 + this.swirl.tree.width / 2;
    };

    SwirlNode.prototype.shade = function() {
      return (Math.cos(this.xRad()) + 1) / 2;
    };

    SwirlNode.prototype.inBack = function(t) {
      this.t = t;
      return Math.cos(this.xRad()) > 0;
    };

    SwirlNode.prototype.inFront = function(t) {
      this.t = t;
      return !this.inBack(t);
    };

    SwirlNode.prototype.draw = function(t) {
      this.t = t - 600;
      this.drawNode(this.swirl.radius * 0.6, this.shade() + 0.9);
      this.t = t - 180;
      this.drawNode(this.swirl.radius * 0.8, this.shade() + 0.4);
      this.t = t;
      return this.drawNode(this.swirl.radius, this.shade());
    };

    SwirlNode.prototype.drawNode = function(size, shade) {
      var c;
      c = this.swirl.tree.context;
      c.beginPath();
      c.arc(this.xPos(), this.yPos(), size, 0, 2 * Math.PI);
      c.fillStyle = this.swirl.color;
      c.fill();
      c.fillStyle = "rgba(0,0,0," + shade + ")";
      return c.fill();
    };

    return SwirlNode;

  })();

  new Tree(width, height, swirls);

}).call(this);

• 据说圣诞树 最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用枞树供奉圣婴。随后，德国人把12月24日作为亚当和夏娃的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪；还点上蜡烛和球，象征基督。到16世纪，宗教改革者马丁·路德，为求得一个满天星斗的圣诞之夜，设计出在家中布置一颗装着蜡烛和球的圣诞树。18世纪，开始在德国信义宗信徒流行，19世纪流行与德国全国，成为德国根深蒂固的传统。
• 19世纪初期，圣诞树传到英国；圣诞树风俗。19世纪中叶，艾伯特（维多利亚女王的丈夫、德国皇子）加以推广普及。维多利亚式圣诞树饰以蜡烛、糖果和花色糕点，用 [2] 丝带和纸链吊挂在树枝上。
• 早在17世纪圣诞树即由德国移民带到北美，至19世纪广为流行。在奥地利、瑞士、波兰和荷兰也颇流行。在中国和日本，圣诞树于19及20世纪由美国传教士传入，多饰以彩色缤纷的纸花