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.glo.........完整代码请登录后点击上方下载按钮下载查看