canvas光影喷射回弹动画效果-html代码-BFW代码库

canvas光影喷射回弹动画效果

代码语言：html

所属分类：动画

代码描述：canvas光影喷射回弹动画效果

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

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        canvas {
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            cursor: crosshair;
            background-color: Blue;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script type="text/javascript">
        bgColor = '#000'; gravity = 0.5; particleColor = '#279'; canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); (onresize = function() {
            width = canvas.width = canvas.clientWidth; height = canvas.height = canvas.clientHeight; o = {
                x: Math.floor(width/2), y: Math.floor(height/2)}; edge = {
                top: -o.y, right: width-o.x, bottom: height-o.y, left: -o.x
            }})(); particles = {}; newParticle = (function() {
            var nextIndex = 0; return function(x, y, r, o, c, xv, yv, rv, ov) {
                particles[++nextIndex] = {
                    index: nextIndex, x: x, y: y, r: r, o: o, c: c, xv: xv, yv: yv, rv: rv, ov: ov
                };
            };
        })(); fireballs = {}; newFireball = (function() {
            var nextIndex = 0; return function(x, y, xv, yv, life) {
                fireballs[++nextIndex] = {
                    index: nextIndex, x: x, y: y, xv: xv, yv: yv, life: life
                };
            };
        })(); mouse = {
            x: 0,
            y: 0,
            d: 0
        }; onmousemove = function(e) {
            mouse.x = e.clientX-o.x; mouse.y = e.clientY-o.y; var dx = mouse.x-pos1.x,
            dy = mouse.y-pos1.y; mouse.d = Math.sqrt(dx*dx+dy*dy);
        }; charging = false; pos1 = {
            x: 0,
            y: 0
        }; showInstructions = true; onmousedown = function(e) {
            pos1.x = mouse.x; pos1.y = mouse.y; charging = true; showInstructions = false;
        }; onmouseup = function() {
            if (charging) {
                newFireball(mouse.x, mouse.y, (pos1.x-mouse.x)*0.03, (pos1.y-mouse.y)*0.03, 600); charging = false;
            }}; time = 0; requestAnimationFrame(loop = function() {
                ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1; ctx.fillStyle = bgColor; ctx.fillRect(0, 0, width, height); ctx.translate(o.x, o.y); if (charging) {
                    var c = Math.floor(30+mouse.d/2); ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(pos1.x, pos1.y); ctx.lineTo(mouse.x, mouse.y); ctx.lineCap = 'round'; ctx.stroke();
                }
                if (showInstructions) {
                    pos1.x=-70; pos1.y=-35; if (time < 10) {
                        var x=-70,
                        y=-35,
                        r = 30-time*2,
                        a = time/10;
                    } else if (time < 80) {
                        var x = (time-10)*2-70,
                        y = (time-10)-35,
                        r = 10,
                        a = 1;
                    } else if (time < 90) {
                        var x = 70,
                        y = 35,
                        r = 10+(time-80)*2,
                        a = 1-(time-80)/10;
                    } else if (time.........完整代码请登录后点击上方下载按钮下载查看