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

最新推荐文章于 2022-04-30 16:34:40 发布

weixin_33754065

最新推荐文章于 2022-04-30 16:34:40 发布

阅读量139

点赞数

综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的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>
run code