随着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. 文本切换器（TextSwitcher）的功能和用法

    TextSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件的同时使用动画效果.与ImageSwitcher相似的是,使用TextSw ...

  2. MongoDB安装环境搭建

    Mongodb的默认端口号27017 _id是全局唯一值,不要去给这个列赋值,默认是唯一的,如果赋值,列入有两列的_id:2,则会报冲突不能插入 [root@HE4 ~]# tar xvf mongo ...

  3. win7下安装sdks

    原文及更多内容:http://yysource.sourceforge.net/?p=103 下载和安装 Windows 调试工具 http://msdn.microsoft.com/zh-CN/wi ...

  4. Flash神奇的视频利器StageVideo

    在过去的几年里,视频已经成为web网页上最主流的趋势之一,这主要是由Adobe Flash Player来推动的.2007年Flash Player 9中引入了H.264和全屏支持技术,通过在web页 ...

  5. Debian8 安装wordpress博客

    首先要安装 php5-gd 已保证wordpress可以正常安装 下载Wordpress wget http://wordpress.org/latest.tar.gz 解压 tar -xzvf la ...

  6. 【Scala】Scala之Control Structures

    一.前言 前面学习了Scala的Numbers,接着学习Scala的Control Structures(控制结构). 二.Control Structures Scala中的控制结构与Java中的颇 ...

  7. ER图，以及转化成关系模式

    1.找出条件中的实体(矩形),属性(椭圆),关系(菱形)关系分为1:1,1:N,M:N,列出ER图 2. -1:1联系的转换方法 -两个实体分别转化为一个关系模式,属性即是本来的属性 -关系可以与任意 ...

  8. es6笔记7^_^class

    ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 部分来自JavaScript ES6 class指南.mozilla https: ...

  9. 在Oracle中数据库、表空间、表之间的关系

    在oracle中,表空间是存储概念上的,建立表空间需要有对应的数据文件,数据文件建立好之后直接会把一定的磁盘空间分配给它,这样可以对数据库的存储空间进行有效的管理.然后在建表的时候指定对应的表空间,该 ...

  10. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...