[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的canvas教程

 1 <head>
 2     <meta charset='utf-8' />
 3     <title>canvas炫彩小球 - By ghostwu</title>
 4     <style>
 5         #canvas {
 6             border: 1px dashed #aaa;
 7         }
 8     </style>
 9     <script>
10         function Ball(x, y, r, color) {
11             this.x = x || 0;
12             this.y = y || 0;
13             this.radius = r || 20;
14             this.color = color || '#09f';
15         }
16         Ball.prototype = {
17             constructor: Ball,
18             stroke: function (cxt) {
19                 cxt.strokeStyle = this.color;
20                 cxt.beginPath();
21                 cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
22                 cxt.closePath();
23                 cxt.stroke();
24             },
25             fill: function (cxt) {
26                 cxt.fillStyle = this.color;
27                 cxt.beginPath();
28                 cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
29                 cxt.closePath();
30                 cxt.fill();
31             },
32             update : function( balls ){
33                 this.x += this.vx;
34                 this.y += this.vy;
35                 this.radius--;
36                 if ( this.radius < 0 ) {
37                     for( var i = 0; i < balls.length; i++ ){
38                         if( balls[i] == this ) {
39                             balls.splice( i, 1 );
40                         }
41                     }
42                     return false;
43                 }
44                 return true;
45             }
46         }
47     </script>
48     <script>
49         window.onload = function () {
50             var oCanvas = document.querySelector("#canvas"),
51                 oGc = oCanvas.getContext('2d'),
52                 width = oCanvas.width, height = oCanvas.height,
53                 balls = [], n = 50;
54             function getRandColor() {
55                 return '#' + (function (color) {
56                     return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
57                 })('');
58             }
59             oCanvas.addEventListener( 'mousemove', function( ev ){
60                 var oEvent = ev || event;
61                 var ball = new Ball( oEvent.clientX, oEvent.clientY, 30, getRandColor());
62                 ball.vx = (Math.random() * 2 - 1) * 5;
63                 ball.vy = (Math.random() * 2 - 1) * 5;
64                 balls.push( ball );
65             }, false );
66 
67             ( function move(){
68                 oGc.clearRect( 0, 0, width, height );
69                 for( var i = 0; i < balls.length; i++ ){
70                     balls[i].update( balls ) && balls[i].fill( oGc );
71                 }
72                 requestAnimationFrame( move );
73             } )();
74         }
75     </script>
76 </head>
77 <body>
78     <canvas id="canvas" width="1200" height="600"></canvas>
79 </body>

<head>
    <meta charset='utf-8' />
    <title>canvas炫彩小球 - By ghostwu</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 || '#09f';
        }
        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('2d'),
                width = oCanvas.width, height = oCanvas.height,
                balls = [], n = 50;
            function getRandColor() {
                return '#' + (function (color) {
                    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
                })('');
            }
            oCanvas.addEventListener( 'mousemove', 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>

posted @ 2017-10-11 15:34 ghostwu 阅读(1203) 评论(0) 编辑收藏举报

刷新页面返回顶部

ghostwu

Ubuntu+Vim下的程序员

[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

公告