jquery实现canvas梦幻树生长动画效果代码-html代码-BFW代码库

jquery实现canvas梦幻树生长动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现canvas梦幻树生长动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
(function ($) {

        var Vector = function (x, y) {

                this.x = x || 0;

                this.y = y || 0;

        };

        Vector.prototype = {

                add: function (v) {

                        this.x += v.x;

                        this.y += v.y;

                        return this;

                },

                length: function () {

                        return Math.sqrt(this.x * this.x + this.y * this.y);

                },

                rotate: function (theta) {

                        var x = this.x;

                        var y = this.y;

                        this.x = Math.cos(theta) * this.x - Math.sin(theta) * this.y;

                        this.y = Math.sin(theta) * this.x + Math.cos(theta) * this.y;

                        //this.x = Math.cos(theta) * x - Math.sin(theta) * y;

                        //this.y = Math.sin(theta) * x + Math.cos(theta) * y;

                        return this;

                },

                mult: function (f) {

                        this.x *= f;

                        this.y *= f;

                        return this;

                }

        };



        var Leaf = function (p, r, c, ctx) {

                this.p = p || null;

                this.r = r || 0;

                this.c = c || 'rgba(255,255,255,1.0)';

                this.ctx = ctx;

        }



        Leaf.prototype = {

                render: function () {

                        var that = this;

                        var ctx = this.ctx;

                        var f = Branch.random(1, 2)

                        for (var i = 0; i < 5; i++) {

                                (function (r) {

                                        setTimeout(function () {

                                                ctx.beginPath();

                                                ctx.fillStyle = that.color;

                                                ctx.moveTo(that.p.x, that.p.y);

                                                ctx.arc(that.p.x, that.p.y, r, 0, Branch.circle, true);

                                                ctx.fill();

                                        }, r * 60);

                                })(i);

                        }

                }

        }





        var Branch = function (p, v, r, c, t) {

                this.p = p || null;

                this.v = v || null;

                this.r = r || 0;

                this.length = 0;

                this.generation = 1;

                this.tree = t || null;

                this.color = c || 'rgba(255,255,255,1.0)';

                this.register();

        };



        Branch.prototype = {

                register: function () {

                        this.tree.addBranch(this.........完整代码请登录后点击上方下载按钮下载查看