html5 canvas制作一个跟着鼠标移动消失的一堆炫彩小球 -js教程-PHP中文网

首页

web前端

js教程

html5 canvas制作一个跟着鼠标移动消失的一堆炫彩小球

一个新手

Oct 13, 2017 am 10:19 AM

canvas h5 html5

综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点

<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 canvas制作一个跟着鼠标移动消失的一堆炫彩小球的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn