随着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. iOS 之 KVC KVO

    KVC:键值编码,是一种间接访问对象实例变量的机制,可以不通过存取方法(getter setter)就可以访问实例变量. KVO: 属性变化的通知机制

  2. gdb命令整理

    Microsoft Windows XP [版本 ] (C) 版权所有 - Microsoft Corp. C:\Documents and Settings\Administrator>e: ...

  3. HDU 3374 String Problem （KMP+最大最小表示）

    HDU 3374 String Problem (KMP+最大最小表示) String Problem Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  4. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

  5. js控制href内容的连接内容的变化

    html: <a data-toggle="modal" href="#myModal_devices" id="check_devices&q ...

  6. spring mvc 异常处理和session添加

    在controller中进行设置 package com.stone.controller; import java.util.HashMap; import java.util.Map; impor ...

  7. Charlse 使用小记

    抓包神器Fiddler 是基于微软的 .Net 技术开发的,没办法直接在 Mac/Linux 下使用,而Charlse是Mac下常用的网络封包截取工具.是一个HTTP代理服务器,HTTP监视器,反转代 ...

  8. mac下sublime 配置查看源码

    sublime及package control的安装查看之前一篇文章:http://www.cnblogs.com/xdwa/p/5805101.html 安装ctags 安装完毕package co ...

  9. jquery 精度计算代码，指定精确小数位

    jquery代码: /** * 将标签的值格式化 * id 标签id * min 最小值 * max 最大值 */ function toFloat(id,min,max){ var htmlVal ...

  10. 使用python制作ArcGIS插件（4）界面交互

    使用python制作ArcGIS插件(4)界面交互 by 李远祥 插件界面部分,除了一开始在设计器中设计的这些界面元素之外,还可以与操作系统进行一些输入输出的交互,这部分的实现全部在pythonadd ...