canvas实现一颗树的生长到开花

最新推荐文章于 2024-07-24 06:54:05 发布

K-Code

最新推荐文章于 2024-07-24 06:54:05 发布

阅读量7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： canvas 生长的大树 html

本文链接：https://blog.youkuaiyun.com/u010298576/article/details/76609244

最近看了一些很牛逼的特效，有位大神用canvas绘制的梦幻大树，深深的震撼了我，超级厉害，于是我也准备尝试着去实现，可能脑子不够用，总是无法实现他那样的梦幻效果，最终只好退而求其次，实现了下面的这种大树，还算满意吧。

效果图

HTML源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>生长的树</title>
    <style>
        html , body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="myCanvas">此浏览器不支持canvas</canvas>
<script src="../js/tree.js"></script>
</body>
</html>

tree.js 源码

/**
 * Created by 004928 on 2017/8/2.
 */
(function (window) {

    var w = window.innerWidth , h = window.innerHeight ;
    var ctx = null ;
    var treeNum = 3 ;
    var initRadius = 25 ;     // 树干的初始宽度
    var maxGeneration = 5 ;   // 最多分支的次数
    var branchArray = null ;  // 树干的集合
    var flowers = [];         // 花的集合

    window.MyRequestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ;

    window.MyCancelRequestAnimationFrame = window.cancelRequestAnimationFrame ||
        window.mozCancelRequestAnimationFrame ||
        window.webkitCancelRequestAnimationFrame ||
        window.msCancelRequestAnimationFrame ;

    /**
     * 初始化canvas