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

    Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docker 最开始由 Sol ...

  2. C# httpclient获取cookies实现模拟web登录

    目前在公司做一款平台化的产品,我主要负责PC端上的开发,在产品推荐过程中为了节省开发时间很多功能模块没来得及做原生,用CEF嵌入了很多带功能web页面,与客户端进行交互从而实现功能. 在二期开发中,产 ...

  3. 是否是有效的dom节点--轮子代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  4. CvIntHaarClassifier

    //定义一个宏.宏里面是指针函数 #define CV_INT_HAAR_CLASSIFIER_FIELDS() \ float (*eval)( CvIntHaarClassifier*, sum_ ...

  5. UVA 1426 - Discrete Square Roots(数论)

    UVA 1426 - Discrete Square Roots 题目链接 题意:给定X, N. R.要求r2≡x (mod n) (1 <= r < n)的全部解.R为一个已知解 思路: ...

  6. 《深入浅出Netty》【PDF】下载

    <深入浅出Netty>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 本文档主要讲述的是深入浅出Netty: ...

  7. WebUploader分片断点上传文件（二）

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

  8. dubbo+zookeeper+jsp+springmvc+spring+mybatis+mysql+maven完整示例

    项目分为三部分,这里分为三个maven项目(基于web,所以最后一个为maven创建的web项目) 1.接口定义以及实体类定义(api+pojo) --- maven创建java项目,打包成jar 2 ...

  9. OC学习13——Foundation框架中的集合

    OC集合类是一些非常有用的工具类,它可以用于存储多个数量不等的对象,并可以实现常用的数据结构(栈.队列等),此外,OC集合还可用于保存具有映射关系的关联数组.OC的集合大致可以分为:NSArray.N ...

  10. ABAP中的枚举对象

    枚举对象是枚举类型的数据对象.枚举对象只能包含类型为枚举类型的枚举值.ABAP从版本7.51开始支持它们. 这是一种常见的模式.在ABAP 7.51之前,人们通常用如下方式实现类似的功能: CLASS ...