葫芦的运维日志

下一篇 搜索 上一篇

---

<canvas id='d1' height="1080" width="1920" style="position:absolute;z-index:0;filter: alpha(opacity:50);opacity: 0.5"></canvas>
<script>
var d1 = document.getElementById("d1");
//alert($(document).width()/2);
var kuan=window.innerWidth/2;
d1.height=window.innerWidth;
d1.width=kuan*2;
    var drawtree = function (ctx, startx, starty, length, angle, depth, branchWidth) {
            var rand = Math.random,
                    n_length, n_angle, n_depth, maxbranch = 4,
                    endx, endy, maxangle = 2 * Math.PI / 4;
            var subbranch;
            ctx.beginPath();
            ctx.moveTo(startx, starty);
            endx = startx + length * Math.cos(angle);
            endy = starty + length * Math.sin(angle);
            ctx.lineCap = 'round';
            ctx.lineWidth = branchWidth;
            ctx.lineTo(endx, endy);
            if (depth <=35) {
                //树的枝干
                ctx.strokeStyle = '#228B22';
            }
            else {
                //树的叶子
                ctx.strokeStyle = '#8B5744';
            }
            ctx.stroke();
            n_depth = depth - 1;
            //判断树是否结束
            if (!n_depth) {
                return;
            }
            subbranch = (rand() * (maxbranch - 1)) + 1;
            branchWidth *= 0.5;
            for (var i = 0; i < subbranch; i++) {
                n_angle = angle + rand() * maxangle - maxangle * 0.5;
                n_length = length * (0.7 + rand() * 0.5);
                setTimeout(function () {
                    drawtree(ctx, endx, endy, n_length, n_angle, n_depth, branchWidth);
                    return;
                },500)
            }
        };

        var canvas1 = document.getElementById('d1');
        var context = canvas1.getContext('2d');
        //初始化的树
        drawtree(context, kuan, 1100,200, -Math.PI / 2, 36, 24);
        //context.fill();
        //document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';

</script>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇