随着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原生写的微博留言板有angularjs效果

    1.HTML: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  2. Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

    ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...

  3. 使用（Drawable）资源——LayerDrawable资源

    与StateListDrawable有点类似,LayerDrawable也可包含一个Drawable数组,因此系统将会按这些Drawable对象的数组顺序来绘制它们,索引最大的Drawable对象将会 ...

  4. CentOS 7 部署、连接 数据库mariadb

    1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb  #启动MariaDB systemctl stop maria ...

  5. globalToLocal的坐标变换

    globalToLocal $(function() { init(); }); // globalToLocal var stage, holder1, holder2,shape; functio ...

  6. SQL Server 2008 sp3启用1433端口的方法

    SQL Server 2008 SP3一般的默认端口是1433,但有时候会遇到一些问题导致1433端口无法启用.这是笔者给大家指导如何开启1433端口   工具/原料 SQL Server 2008 ...

  7. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  8. volatile关键字解析(转)

    volatile关键字解析 转载:http://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在J ...

  9. HDU 2092 整数解

    整数解 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. Superwebsocket 模拟微信聊天室

    在园子里潜水几年了,工作以来算是有些积累,突然想写点东西方便以后温故而知新,希望自己能够坚持下去. 关于Superwebsocket的介绍我就不多说了,请点击:http://www.cnblogs.c ...