网页表白爱心树源码--改编

原表白爱心树源码（好久以前下载的源码，具体谁的忘记了，所以自己上传了一下）：
https://github.com/lzs1996/love_tree.git

改编后的源码：
https://github.com/lzs1996/circle_tree.git

先看一下改编后特效：

在原先源码基础上做了些改变，加上唯美枫叶飘落场景，背景音乐。原本的树上的叶子形状是桃心形的，但没有对象，做这个感觉怪怪的，想做成枫叶子或者在树上挂满五角星的，但对应的数学函数好像挺复杂的，又不太会，所以改成圆形代替了，哈哈~。

只是做着好玩，记录一下，没别的意思。如果各位大佬有谁会的，还请不吝赐教，谢谢

唯美枫叶飘落场景js

var d = "<div class='maple'>????<div>";
setInterval(function () {
            var f = $(document).width();
            var e = Math.random() * f - 300; // 枫叶的定位left值
            var o = 0.2 + Math.random(); // 枫叶的透明度
            var fon = 25 + Math.random() * 50; // 枫叶大小
            var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移
            var k = 8000 + 5000 * Math.random();
            var deg = Math.random() * 360; // 枫叶的方向
            $(d).clone().appendTo(".maplebg").css({
                left: e + "px",
                opacity: o,
                transform: "rotate(" + deg + "deg)",
                "font-size": fon,
            }).animate({
                top: "550px",
                left: l + "px",
                opacity: 0.1,
            }, k, "linear", function () {
                $(this).remove()
            })
        }, 500)

树上叶子形状函数js

这是圆形状的函数

Heart = function() {
                // x = 16 sin^3 t
                // y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
                // http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
                var points = [], x, y, t;
                for (var i = 10; i < 30; i += 0.2) {
                    t = i / Math.PI;
                    x = 10 * Math.cos(t);
                    y = 10 * Math.sin(t);
                    points.push(new Point(x, y));
                }
                this.points = points;
                this.length = points.length;
            }

桃心形状的函数表达式，百度上也能搜到：

桃心形js部分

Heart = function() {
        // x = 16 sin^3 t
        // y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
        // http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
        var points = [], x, y, t;
        for (var i = 10; i < 30; i += 0.2) {
            t = i / Math.PI;
            x = 16 * Math.pow(Math.sin(t), 3);
            y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
            points.push(new Point(x, y));
        }
        this.points = points;
        this.length = points.length;
    }

画树状部分：

Tree = function(canvas, width, height, opt) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.opt = opt || {};

        this.record = {};
        
        this.initSeed();    //种子
        this.initFooter();  //树根
        this.initBranch();  //树枝
        this.initBloom();   //花
    }

花颜色部分：

Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) {
        this.tree = tree;
        this.point = point;
        this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')'; //调整花的颜色范围
        this.alpha = alpha || random(0.3, 1);
        this.angle = angle || random(0, 360);
        this.scale = scale || 0.1;
        this.place = place;
        this.speed = speed;

        this.figure = figure;
    }

这里好像可以调树的长叶子和花的整个范围

我们整个树这里是爱心桃状，能不能改成常青树那种垂直向上的树形，应该也是某个函数公式，暂时还没搞出来~

createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) {
            var x, y;
            while (true) {
                x = random(20, width - 20);
                y = random(20, height - 20);
                if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) {
                    return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed);
                }
            }
        }