Canvas 超炫的霓虹灯树枝生长动画

Rainbow tree growing 用来创造魔幻树！ 2016年度canvas候选作品！

canvas, tree

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2421
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

;
void
function() {

var depth = 16,
        branchWidth = 12,
        step = 0
    var newDepthPub, depthPub
    var canvas = document.getElementById('mycanvas')
    var ctx = canvas.getContext('2d')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    ctx.globalCompositeOperation = 'lighter';

var drawTree = function(ctx, startX, startY, length, angle, depth, branchWidth) {
        var rand = Math.random,
            newDepth,
            newLength, newAngle, maxBranch = 3,
            endX, endY, maxAngle = 2 * Math.PI / 4,
            subBranches, lenShrink;

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 <= 2) {
            ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)'
        } else {
            ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50, 25)'
        }
        ctx.stroke()

newDepth = depth - 1
        if (!newDepth) return

subBranches = maxBranch - 1
        branchWidth *= .7

for (var i = 0; i < subBranches; i++) {
            newAngle = angle + rand() * maxAngle - maxAngle * .5
            newLength = length * (.7 + rand() * .3)
            setTimeout(function() {
                drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth)
                newDepthPub = newDepth
                depthPub = depth
                step++;
            }, 100)
        }
    }

var init = function() {
        step = 0
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        ctx.globalCompositeOperation = 'lighter';
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
        drawTree(ctx, ~~(window.innerWidth / 2), ~~(window.innerHeight / 1.02), 60, -Math.PI / 2, depth, branchWidth)
    }

var regrow = function() {
        if (step < 65534) return
        init()
    }

document.querySelector('body').addEventListener('click', function(e) {
        regrow()
    })

document.addEventListener('DOMContentLoaded', function() {
        init()
    }, false);

window.onresize = regrow

}();

编译

CSS

HTML

Rainbow tree growing 用来创造魔幻树！ 2016年度canvas候选作品！

canvas, tree

编辑器支持Emmet

快捷键

Rainbow tree growing 用来创造魔幻树！ 2016年度canvas候选作品！

canvas, tree

Canvas 大树枝干和绿叶生长动画

Canvas 彩虹微生物生长动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：