Question

我偶然发现了一个codepen demo http://codepen.io/timohausmann/pen/icCer 然后代码在codepen窗口中正常工作。什么时候，我将它复制到本地HTML文件中，它停止工作。以下代码全部合并在一个.html文件中

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    overflow: hidden;
}
#myCanvas {
    display: block;
}

#button {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    position: absolute;
    font-size: 1.5em;
    text-transform: uppercase;
    padding: 7px 20px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    top: 50%;
    border-radius: 10px;
    color: white;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
    border: 5px solid transparent;
    border-bottom-color: rgba(0,0,0,0.35);
    background: hsla(260, 100%, 50%, 1);
    cursor: pointer;

    animation: pulse 1s infinite alternate;
    transition: background 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
    background: hsla(220, 100%, 60%, 1);
    margin-top: -1px;

    animation: none;
}
#button:active {
    border-bottom-width: 0;
    margin-top: 5px;
}
@keyframes pulse {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: 6px; 
    } 
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.requestAnimFrame = (function () {
    return  window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

Math.randMinMax = function(min, max, round) {
    var val = min + (Math.random() * (max - min));

    if( round ) val = Math.round( val );

    return val;
};
Math.TO_RAD = Math.PI/180;
Math.getAngle = function( x1, y1, x2, y2 ) {

    var dx = x1 - x2,
        dy = y1 - y2;

    return Math.atan2(dy,dx);
};
Math.getDistance = function( x1, y1, x2, y2 ) {

    var     xs = x2 - x1,
        ys = y2 - y1;       

    xs *= xs;
    ys *= ys;

    return Math.sqrt( xs + ys );
};

var     FX = {};

(function() {

    var canvas = document.getElementById('myCanvas'),
        ctx = canvas.getContext('2d'),
        lastUpdate = new Date(),
        mouseUpdate = new Date(),
        lastMouse = [],
        width, height;

    FX.particles = [];

    setFullscreen();
    document.getElementById('button').addEventListener('mousedown', buttonEffect);

    function buttonEffect() {

        var button = document.getElementById('button'),
            height = button.offsetHeight,
            left = button.offsetLeft,
            top = button.offsetTop,
            width = button.offsetWidth,
            x, y, degree;

        for(var i=0;i<40;i=i+1) {

            if( Math.random() < 0.5 ) {

                y = Math.randMinMax(top, top+height);

                if( Math.random() < 0.5 ) {
                    x = left;
                    degree = Math.randMinMax(-45,45);
                } else {
                    x = left + width;
                    degree = Math.randMinMax(135,225);
                }

            } else {

                x = Math.randMinMax(left, left+width);

                if( Math.random() < 0.5 ) {
                    y = top;
                    degree = Math.randMinMax(45,135);
                } else {
                    y = top + height;
                    degree = Math.randMinMax(-135, -45);
                }

            }
            createParticle({
                x: x,
                y: y,
                degree: degree,
                speed: Math.randMinMax(100, 150),
                vs: Math.randMinMax(-4,-1)
            });
        }
    }
    window.setTimeout(buttonEffect, 100); 

    loop();

    window.addEventListener('resize', setFullscreen );

    function createParticle( args ) {

        var options = {
            x: width/2,
            y: height/2,
            color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')',
            degree: Math.randMinMax(0, 360),
            speed: Math.randMinMax(300, 350),
            vd: Math.randMinMax(-90,90),
            vs: Math.randMinMax(-8,-5)
        };

        for (key in args) {
          options[key] = args[key];
        }

        FX.particles.push( options );
    }

    function loop() {

        var     thisUpdate = new Date(),
            delta = (lastUpdate - thisUpdate) / 1000,
            amount = FX.particles.length,
            size = 2,
            i = 0,
            p;

        ctx.fillStyle = 'rgba(15,15,15,0.25)';
        ctx.fillRect(0,0,width,height);

        ctx.globalCompositeStyle = 'lighter';

        for(;i<amount;i=i+1) {

            p = FX.particles[ i ];

            p.degree += (p.vd * delta);
            p.speed += (p.vs);// * delta);
            if( p.speed < 0 ) continue;

            p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
            p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);

            ctx.save();

            ctx.translate( p.x, p.y );
            ctx.rotate( p.degree * Math.TO_RAD );

            ctx.fillStyle = p.color;
            ctx.fillRect( -size, -size, size*2, size*2 );

            ctx.restore();
        }

        lastUpdate = thisUpdate;

        requestAnimFrame( loop );
    }

    function setFullscreen() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    };
})();
</script>
<button id="button">click me</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

这是来自所有三个代码集窗口的代码，但它似乎不起作用？

Answer 1

添加jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

为什么这个codepen演示不能在本地工作？

1 个答案: