ホームページ > 記事 > ウェブフロントエンド > HTML5 キャンバスは、マウスを動かすと消えるカラフルなボールの束を作成します

HTML5 キャンバスは、マウスを動かすと消えるカラフルなボールの束を作成します

一个新手オリジナル: 2017-10-13 10:19:172488ブラウズ

これまでに学んだことを総合的に活用して、豪華なボールのアニメーションを実現します

<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>

以上がHTML5 キャンバスは、マウスを動かすと消えるカラフルなボールの束を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jq ソースコード内の $,jQuery に関連付けられたメソッド次の記事：jq ソースコード内の $,jQuery に関連付けられたメソッド

続きを見る