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

    1-下载及安装 1.1 - Maven - 项目管理利器 http://maven.apache.org/ Apache组织的开源项目. Maven是一个基于POM(Project Object Mo ...

  2. Redis的五种数据类型及方法

    字符串string: 字符串类型是Redis中最为基础的数据存储类型,是一个由字节组成的序列,他在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据货Json对象描 ...

  3. 大白话Vue源码系列(02)：编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  4. C#中的Explicit和Implicit

    今天在Review一个老项目的时候,看到一段奇怪的代码. if (dto.Payment == null) continue; var entity = entries.FirstOrDefault( ...

  5. Java基础—标识符及命名规范

      什么是标识符符? 凡是可以由自己命名的地方都称为修饰符. 例: 项目名 ,包名 ,类名 .方法名 2.   命名规范. ①    不可使用java关键字和保留字,但是可以包含关键字和保留字. ②  ...

  6. 授权远程连接MySQL（Linux）

    MySQL远程訪问的命令 格式: mysql -h主机地址 -uusername -p用户password 首先在目标服务器上(115.159.66.51)改动mysql的my.cnf文件: 改动退出 ...

  7. SDL2源码分析2：窗体（SDL_Window）

    ===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...

  8. java多线程编程核心技术——第七章补漏拾遗

    本章主要知识点: 1)线程组的使用 2)如何切换线程状态 3)SimpleDateFormat类与多线程的解决方法 4)如何处理线程异常. 这本书基本来到了终点,其实在第四章来说,核心(基础)的线程知 ...

  9. adb连接手机报错解决方案汇总(win7)

    >>adb devices常见错误:   >>解决方案汇总 检查端口是否占用:netstat -ano | findstr 5037 | findstr LISTENING 检 ...

  10. python自动化--文件处理

    文件处理 格式 打开 f=open('a.txt',mode='r',encoding='utf-8') 读写 data=f.read() print(data) 关闭 f.close() 流程分析: ...