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

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

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

body中写入canvas标签：

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

　　

直接上js代码：

canvas的js开头都是固定的：

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

加载三个小球的数据：

  1. discs = [
  2. 		{
  3. 			x:150,
  4. 			y:250,
  5. 			velocityx:-3.2,      //小球横向运动速度
  6. 			velocityy:3.5,       //小球纵向运动速度
  7. 			radius:25,　　　　　　　　//小球半径
  8. 			strokestyle:'gray',     //小球填充颜色
  9. 		},
  10. 		{
  11. 			x:50,
  12. 			y:150,
  13. 			velocityx:2.2,
  14. 			velocityy:2.5,
  15. 			radius:25,
  16. 			strokestyle:'blue',
  17. 		},
  18. 		{
  19. 			x:150,
  20. 			y:75,
  21. 			velocityx:1.2,
  22. 			velocityy:1.5,
  23. 			radius:25,
  24. 			strokestyle:'orange',
  25. 		},
  26. 		],

　　

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

  1. numdiscs = discs.length, //小球数量
  2. animatebutton = document.getElementById('animatebutton');
  3. // 小球暂停开始按钮

　

用canvas画出小球：

  1. function draw(){
  2. 		var disc = discs[i];    //小球的索引
  3. 		for(var i=0;i<numdiscs;i++)
  4. 		{
  5. 			disc = discs[i];
  6. 			cx.save();
  7. 			cx.beginPath();
  8. 			cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
  9. 			cx.fillStyle=disc.strokestyle;    //小球填充色
  10. 			cx.fill();
  11. 			cx.restore();
  12. 			}
  13. 		}

　　

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

  1. function update(){
  2. 		var disc = null;
  3. 		for(var i=0;i<numdiscs;i++)
  4. 		{
  5. 			disc = discs[i];
  6. 			if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)      //小球横向撞墙后朝相反方向运动
  7. 			disc.velocityx = -disc.velocityx;
  8. 			if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)   //小球纵向向撞墙后朝相反方向运动
  9. 			disc.velocityy = -disc.velocityy;
  10. 			disc.x+=disc.velocityx;    //每次循环小球横向运动距离
  11. 			disc.y+=disc.velocityy;　　//每次循环小球纵向运动距离
  1. } }

　

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

  1. window.requestAnimationFrame()函数是canvas标签中特有的，这个函数可以根据最佳流畅性自动选择循环一次的时间。
  1. function animate(){
  2. 		if(!paused){
  3. 		cx.clearRect(0,0,canvas.width,canvas.height);
  4. 		update();
  5. 		draw();
  6. 		window.requestAnimationFrame(animate);
  7. 			}
  8. 		}

　　

运行以上函数：

  1. animatebutton.onclick = function (){
  2. 		paused = paused? false:true;
  3. 		if(paused){                        //点击按钮后，按钮文字改变
  4. 		animatebutton.value = "animate";
  5. 		}
  6. 		else{
  7. 			window.requestAnimationFrame(animate);
  8. 			animatebutton.value = "pause";      //点击按钮后，按钮文字改变
  9. 			}
  10. 		}

　　

　

代码整合：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8.  
  9. 	<input type="button"  id="animatebutton" value="animate" />
  10. 	<canvas id="canvas" width="750" height="500"></canvas>
  11. 	</body>
  12. 	<script type="text/javascript">
  13. 		var canvas = document.getElementById('canvas'),
  14. 		cx= canvas.getContext('2d'),
  15. 		paused = true ,
  16. 		discs = [
  17. 		{
  18. 			x:150,
  19. 			y:250,
  20. 			velocityx:-3.2,
  21. 			velocityy:3.5,
  22. 			radius:25,
  23. 			strokestyle:'gray',
  24. 		},
  25. 		{
  26. 			x:50,
  27. 			y:150,
  28. 			velocityx:2.2,
  29. 			velocityy:2.5,
  30. 			radius:25,
  31. 			strokestyle:'blue',
  32. 		},
  33. 		{
  34. 			x:150,
  35. 			y:75,
  36. 			velocityx:1.2,
  37. 			velocityy:1.5,
  38. 			radius:25,
  39. 			strokestyle:'orange',
  40. 		},
  41. 		],
  42.  
  43. 		numdiscs = discs.length,
  44. 		animatebutton = document.getElementById('animatebutton');
  45.  
  46. 		function update(){
  47. 			var disc = null;
  48. 			for(var i=0;i<numdiscs;i++)
  49. 			{
  50. 				disc = discs[i];
  51. 				if(disc.x +disc.velocityx+disc.radius > cx.canvas.width || disc.x + disc.velocityx -disc.radius<0)
  52. 				disc.velocityx = -disc.velocityx;
  53. 				if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0)
  54. 				disc.velocityy = -disc.velocityy;
  55. 				disc.x+=disc.velocityx;
  56. 				disc.y+=disc.velocityy;
  57. 			}
  58. 		}
  59.  
  60. 		function draw(){
  61. 			var disc = discs[i];
  62. 			for(var i=0;i<numdiscs;i++)
  63. 			{
  64. 				disc = discs[i];
  65.  
  66. 				cx.save();
  67. 				cx.beginPath();
  68. 				cx.arc(disc.x,disc.y,disc.radius,0, Math.PI*2,false);
  69. 				cx.fillStyle=disc.strokestyle;
  70. 				cx.fill();
  71. 				//cx.stroke();
  72. 				cx.restore();
  73. 			}
  74. 		}
  75. 		function animate(){
  76. 			if(!paused){
  77. 				cx.clearRect(0,0,canvas.width,canvas.height);
  78.  
  79. 				update();
  80. 				draw();
  81. 				window.requestAnimationFrame(animate);
  82. 			}
  83. 		}
  84.  
  85. 		animatebutton.onclick = function (){
  86. 			paused = paused? false:true;
  87. 			if(paused){
  88. 				animatebutton.value = "animate";
  89.  
  90. 			}
  91. 			else{
  92. 				window.requestAnimationFrame(animate);
  93. 				animatebutton.value = "pause";
  94. 			}
  95. 		}
  96. 	</script>
  97. </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. MySQL要导出成excel的方法

    MySQL 要导出成 excel 文件很简单,执行类似这样的命令:   select * from 某个表 into outfile  'd:/文件名.xls';   上述命令你在服务器上执行,就导在 ...

  2. Angular - - form.FormController、ngModel.NgModelController

    form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. ...

  3. Swift之UITabBarController 导航控制器颜色的改变

    废话不多 直接上代码 self.window = UIWindow(frame: UIScreen.mainScreen().bounds) self.window!.backgroundColor ...

  4. C/C++将一个整型数组拼接成一个字符串

    参考: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #include <stdio.h> #include <string.h> int ma ...

  5. jQuery选择器，用逗号分隔的时候需要注意范围问题

    jQuery选择器,用逗号分隔的时候需要注意范围问题: <%@ page language="java" import="java.util.*" pag ...

  6. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  7. Oak Seeds 网站项目回顾

    项目是一个教育类网站,先给出网站网址:http://www.oakseeds.cn/ Oak Seeds原本的名字叫做American School,后来更给为Oak Seeds,意为橡木子.网站是为 ...

  8. PS切图篇（一）---界面设置

    #工作区设置 四大主要面板:信息 字符  图层 历史记录 打开必要属性: 选择工具设置 选择图层的方式:ctrl+鼠标左击想选择的图层

  9. Java内部类之匿名内部类

      我们都知道Java中可以使用内部类,将一个类的定义放在另一个类的定义的内部,这就是内部类,但是匿名内部类往往使我们摸不着头脑,因为它并没有特定的名称,那么该如何使用它呢? 定义一个匿名内部类 pu ...

  10. linux gdb基本概念

    GDB是一个功能强大的调试器,它是一个自由软件,能够用在许多UNIX平台上.它同时也是Linux系统中的默认调试器.GDB已被移植到许多其他的计算机平台上,并且能够用于调试嵌入式实时系统.一般来说,G ...