![[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球](https://1200zi.500zi.com/uploadfile/img/15/615/a799575818811c1c38cfa3758caa576b.jpg)
综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的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 ){38if( 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>
![[js高手之路] html5 canvas动画教程 - 匀速运动](https://1200zi.500zi.com/uploadfile/img/15/245/83e2700ea38bd5ab0b639aba437dc410.jpg)
