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

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

<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

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

  1. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  2. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  3. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  4. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  5. [js高手之路] html5 canvas动画教程 - 匀速运动

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  6. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  7. [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

    上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

随机推荐

  1. 【算法】字典的诞生：有序数组 PK 无序链表

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  2. idea从git上拉取并管理项目

    1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...

  3. TP3.2 图片上传及缩略图

    基于TP自带的上传文件的类, Think/Upload.class.php 设置表单的enctype属性 下面是上传的具体方法 /** * 图片上传处理 * @param [String] $path ...

  4. 百度编辑器的内容改变事件监听bug

    先贴上我的初始化代码,可能是用法问题冤枉了百度编辑器,如果是我的用法有问题欢迎大侠们指正 <!DOCTYPE type> <html> <head> <met ...

  5. 酷狗歌曲缓存kgtemp转mp3工具

    一直用网易音乐听歌,不过网易的歌曲版权确实是少了一些,在酷狗上可以找到,但收费歌曲只能试听不能下载. 寻找方案 从设置里可以看出,酷狗会设置缓存目录,试听的歌曲存放到这个缓存里. 打开缓存目录: 可以 ...

  6. 《iOS Human Interface Guidelines》——Multitasking

    多任务处理 多任务处理让人们在屏幕上(以及合适的iPad模式)查看多个app,而且在近期使用的app中高速地切换. 在iOS 9中.人们能够使用多任务处理UI(例如以下所看到的)来选择一个近期使用的a ...

  7. 20150605面试汇总--js与java的差别

    javascript与java都是编程语言,不同在于代码格式不同. js基于对象,java是面向对象: java是强变量.编译前必须作出声明.js是弱变量,使用前不需做声明: JavaScript 是 ...

  8. 通过c# 实现mysql 数据库的备份和附加

    近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...

  9. LintCode-丑数

    设计一个算法.找出仅仅含素因子3,5,7 的第 k 大的数. 符合条件的数如:3.5.7,9,15...... 您在真实的面试中是否遇到过这个题? Yes 例子 假设k=4, 返回 9 挑战 要求时间 ...

  10. 输入url会发什什么

    从输入url到页面加载完成发生了什么 整体来说有几个基本的点: 1.浏览器的地址栏输入url并按下回车 2.浏览器查找当前url是否存在缓存,并比较缓存是否过期 3.DNS解析url对应的IP 4.根 ...