随着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. 十二生肖&天干地支

    看相:http://baike.baidu.com/view/833122.htm?fr=aladdin 八字:http://baike.baidu.com/view/17127.htm?fr=ala ...

  2. Chrome调试大全

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

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

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

  4. iOS 属性之assign、copy、retain

    参考自:http://blog.csdn.net/getchance/article/details/42213219 参考自:http://zhidao.baidu.com/link?url=Xmn ...

  5. Android应用的基本组件介绍和签名Android应用程序

    一.Android应用的基本组件介绍  Activity和View :Activity只能通过setContentView(View)来显示指定的组件.View组件是所有UI控件.容器控件的基类,Vi ...

  6. SecureCRT 选择Courier New等其他字体.

    http://justwinit.cn/post/5813/ 如何解决SecureCRT无法选择Courier New等其他字体最终解决办法:到C:\Windows\Fonts目录下,找到Courie ...

  7. 001.MVC基本概述

    MVC的基本概念 一.NET平台下开发web应用程序的方案(方法) 方案A:ASP.NET webForm1.web窗体:臃肿(胖)性能低 优点:有很多的web控件可以使用,能够方便的和服务端交互(数 ...

  8. 【ci框架基础】之部署百度编辑器

    在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将uedi ...

  9. MATLAB绘制等高线和梯度场

    clear;clc;close all [X,Y] = meshgrid(-:.:); % 产生网格数据X和Y Z = X.*exp(-X.^ - Y.^); % 计算网格点处曲面上的Z值 [DX,D ...

  10. SimRank协同过滤推荐算法

    在协同过滤推荐算法总结中,我们讲到了用图模型做协同过滤的方法,包括SimRank系列算法和马尔科夫链系列算法.现在我们就对SimRank算法在推荐系统的应用做一个总结. 1. SimRank推荐算法的 ...