随着html5发展，canvas标签作为h5革命性的发展标志也越来越流行。canvas标签的强大之处，不仅在于它可以作为一个独立的画布，也可以利用canvas做一些动画而不用导入flash文件。同时，canvas还可以一些游戏、商城商品图片放大器功能等等。

这篇博客先写一些简单动画，同时描述一下原理。

首先，canvas标签不是一个独立的部分，它是要以js代码辅助而成的一个模块，所以js代码对其尤为重要。

body中写入canvas标签：

<canvas id="canvas" width="750" height="500"></canvas>
<input type="button"  id="animatebutton" value="animate" />   //控制小球的运动与暂停

　　

直接上js代码：

canvas的js开头都是固定的：

var canvas = document.getElementById('canvas'),

cx= canvas.getContext('2d'),
paused = true ,//设置小球加载完成是否暂停，现在加载完成小球不动。

加载三个小球的数据：

discs = [

		{

			x:150,

			y:250,

			velocityx:-3.2,      //小球横向运动速度

			velocityy:3.5,       //小球纵向运动速度

			radius:25,　　　　　　　　//小球半径

			strokestyle:'gray',     //小球填充颜色

		},

		{

			x:50,

			y:150,

			velocityx:2.2,

			velocityy:2.5,

			radius:25,

			strokestyle:'blue',

		},

		{

			x:150,

			y:75,

			velocityx:1.2,

			velocityy:1.5,

			radius:25,

			strokestyle:'orange',

		},

		],

　　

定义小球的数量以及找到控制小球暂停的button

numdiscs = discs.length, //小球数量

animatebutton = document.getElementById('animatebutton');

// 小球暂停开始按钮

　

用canvas画出小球：

function draw(){

		var disc = discs[i];    //小球的索引

		for(var i=0;i<numdiscs;i++)

		{

			disc = discs[i];

			cx.save();

			cx.beginPath();

			cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);

			cx.fillStyle=disc.strokestyle;    //小球填充色

			cx.fill();

			cx.restore();

			}

		}

　　

设置碰撞及小球运动函数：

function update(){

		var disc = null;

		for(var i=0;i<numdiscs;i++)

		{

			disc = discs[i];

			if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)      //小球横向撞墙后朝相反方向运动

			disc.velocityx = -disc.velocityx;

			if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)   //小球纵向向撞墙后朝相反方向运动

			disc.velocityy = -disc.velocityy;

			disc.x+=disc.velocityx;    //每次循环小球横向运动距离

			disc.y+=disc.velocityy;　　//每次循环小球纵向运动距离
} }

　

设置小球的运动，这是一个循环函数，当按钮点击运动的时候，小球每隔一点时间循环运动，其中

window.requestAnimationFrame()函数是canvas标签中特有的，这个函数可以根据最佳流畅性自动选择循环一次的时间。
function animate(){

		if(!paused){

		cx.clearRect(0,0,canvas.width,canvas.height);

		update();

		draw();

		window.requestAnimationFrame(animate);

			}

		}

　　

运行以上函数：

animatebutton.onclick = function (){

		paused = paused? false:true;

		if(paused){                        //点击按钮后，按钮文字改变

		animatebutton.value = "animate";

		}

		else{

			window.requestAnimationFrame(animate);

			animatebutton.value = "pause";      //点击按钮后，按钮文字改变

			}

		}

　　

　

代码整合：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

	<input type="button"  id="animatebutton" value="animate" />

	<canvas id="canvas" width="750" height="500"></canvas>

	</body>

	<script type="text/javascript">

		var canvas = document.getElementById('canvas'),

		cx= canvas.getContext('2d'),

		paused = true ,

		discs = [

		{

			x:150,

			y:250,

			velocityx:-3.2,

			velocityy:3.5,

			radius:25,

			strokestyle:'gray',

		},

		{

			x:50,

			y:150,

			velocityx:2.2,

			velocityy:2.5,

			radius:25,

			strokestyle:'blue',

		},

		{

			x:150,

			y:75,

			velocityx:1.2,

			velocityy:1.5,

			radius:25,

			strokestyle:'orange',

		},

		],

		numdiscs = discs.length,

		animatebutton = document.getElementById('animatebutton');

		function update(){

			var disc = null;

			for(var i=0;i<numdiscs;i++)

			{

				disc = discs[i];

				if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)

				disc.velocityx = -disc.velocityx;

				if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)

				disc.velocityy = -disc.velocityy;

				disc.x+=disc.velocityx;

				disc.y+=disc.velocityy;

			}

		}

		function draw(){

			var disc = discs[i];

			for(var i=0;i<numdiscs;i++)

			{

				disc = discs[i];

				cx.save();

				cx.beginPath();

				cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);

				cx.fillStyle=disc.strokestyle;

				cx.fill();

				//cx.stroke();

				cx.restore();

			}

		}

		function animate(){

			if(!paused){

				cx.clearRect(0,0,canvas.width,canvas.height);

				update();

				draw();

				window.requestAnimationFrame(animate);

			}

		}

		animatebutton.onclick = function (){

			paused = paused? false:true;

			if(paused){

				animatebutton.value = "animate";

			}

			else{

				window.requestAnimationFrame(animate);

				animatebutton.value = "pause";

			}

		}

	</script>

</html>

　　

效果：

没有点击运动前：

点击运动后：

小球是一直运动的，点击pause之后，小球运动暂停。

canvas小球动画原理的更多相关文章

  1. canvas小球动画

    绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...

  2. canvas学习之小球动画

    项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...

  3. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  4. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  5. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  6. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  7. Atitit 视频编码与动画原理attilax总结

    Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...

  8. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  9. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. js原生继承之——类式继承实例(推荐使用)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. permeation开篇

    学习方法: To follow the path look to the master follow the master walk with the master see through the m ...

  3. KB奇遇记(1)：开篇

    我已经确定了2017年1月24日将是在旗滨工作的最后一天. 回顾从2015年8月3日入职那天开始到现在,一年半多的时间里的种种奇葩经历,深深被这家公司的制度.企业文化.官僚主义.粗糙的信息化建设以及利 ...

  4. 项目实战（连载）：基于Angular2+Mongodb+Node技术实现的多用户博客系统教程（2）

    本章主要讲什么(一句话)?   <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...

  5. 【LeetCode题解】链表Linked List

    1. 链表 数组是一种顺序表,index与value之间是一种顺序映射,以\(O(1)\)的复杂度访问数据元素.但是,若要在表的中间部分插入(或删除)某一个元素时,需要将后续的数据元素进行移动,复杂度 ...

  6. vue2重写饿了么

    构建 vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如: 代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便 PostCss, ...

  7. 你需要了解的 Core Spotlight

    你需要了解的 Core Spotlight -- 了解Spotlight Core Spotlight是iOS 9中苹果推出了新的Search API,可以直接搜App内的内容(in-App Sear ...

  8. [Linux] PHP程序员玩转Linux系列-怎么安装使用

    现在服务器主流都是Linux系统,主流发行版是CentOS,最新的CentOS版本号是7.3,我公司使用的是CentOS6.5,所以,我还是主要去学习6.x版本的CentOS.桌面版的Linux系统中 ...

  9. Windows下composer的下载与配置

    composer是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. 下面记录一 ...

  10. C++待解

    //[要求]按以下描述和要求建立一个含有对象成员的类TeleBook,用类Record定义的数组是TeleBook的数据成员. // 写出所有定义成员函数的代码.执行主函数对其测试. Record私有 ...