Maison > Article > interface Web > Le canevas HTML5 crée un tas de boules colorées qui disparaissent lorsque la souris bouge

Le canevas HTML5 crée un tas de boules colorées qui disparaissent lorsque la souris bouge

一个新手original: 2017-10-13 10:19:172436parcourir

Utilisez pleinement ce que vous avez appris auparavant pour réaliser une magnifique animation de balle Les points de connaissance utilisés dans cet exemple

<head>
    <meta charset=&#39;utf-8&#39; />
    <title>canvas炫彩小球</title>
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script>
        function Ball(x, y, r, color) {
            this.x = x || 0;
            this.y = y || 0;
            this.radius = r || 20;
            this.color = color || &#39;#09f&#39;;
        }
        Ball.prototype = {
            constructor: Ball,
            stroke: function (cxt) {
                cxt.strokeStyle = this.color;
                cxt.beginPath();
                cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.stroke();
            },
            fill: function (cxt) {
                cxt.fillStyle = this.color;
                cxt.beginPath();
                cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            },
            update : function( balls ){
                this.x += this.vx;
                this.y += this.vy;
                this.radius--;
                if ( this.radius < 0 ) {
                    for( var i = 0; i < balls.length; i++ ){
                        if( balls[i] == this ) {
                            balls.splice( i, 1 );
                        }
                    }
                    return false;
                }
                return true;
            }
        }
    </script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                balls = [], n = 50;
            function getRandColor() {
                return &#39;#&#39; + (function (color) {
                    return (color += &#39;0123456789abcdef&#39;[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
                })(&#39;&#39;);
            }
            oCanvas.addEventListener( &#39;mousemove&#39;, function( ev ){
                var oEvent = ev || event;
                var ball = new Ball( oEvent.clientX, oEvent.clientY, 30, getRandColor());
                ball.vx = (Math.random() * 2 - 1) * 5;
                ball.vy = (Math.random() * 2 - 1) * 5;
                balls.push( ball );
            }, false );

            ( function move(){
                oGc.clearRect( 0, 0, width, height );
                for( var i = 0; i < balls.length; i++ ){
                    balls[i].update( balls ) && balls[i].fill( oGc );
                }
                requestAnimationFrame( move );
            } )();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthodes liées à $,jQuery dans le code source jqArticle suivant：Méthodes liées à $,jQuery dans le code source jq

Articles Liés

Voir plus