canvas学习之制作动画
html部分
...... <body> <canvas id="myCanvas" width="400" height="400" ></canvas> <!-- 给动画添加控制按钮 --> <div> <button id="startAnimation">Start</button> <button id="stopAnimation">Stop</button> </div> ......
制作动画(引入jquery.js)
1. 创建动画循环
之所以称为循环，是因为它在重复发生。
动画循环三要素：
1）更新需要绘制的对象（如移动对象的位置）
2）清除画布
3）在画布上重新绘制对象
注意：在清除对象之前不要绘制对象，否则看不到任何对象！
实例：
2.更新、清除、绘制
一个简单的例子：建立一个简单的动画，使一个正方形每帧向右移动1像素,单击stop按钮，该正方形停止移动
<script>
function draw1(id){
var myCanvas =$('#myCanvas');
var context =myCanvas.get(0).getContext("2d");
var canvasWidth = myCanvas.width();
var canvasHeight = myCanvas.height();
// 给动画添加“开始”和“停止”的控制按钮
var playAnimation = true;
var startButton = $('#startAnimation');
var stopButton = $('#stopAnimation');
startButton.hide();
startButton.click(function(){
$(this).hide();
stopButton.show();
playAnimation = true;
animate();
})
stopButton.click(function(){
$(this).hide();
startButton.show();
playAnimation = false;
})
var x = 0; // 保存当前正方形的X位置。
// animate函数 创建循环，在函数外部调用此函数即可启动该循环
function animate(){
// 如果playAnimation变量保存的饿是false，那么动画循环停止运行
if(playAnimation){
x++;
context.clearRect(0,0,canvasWidth,canvasHeight);
context.fillRect(x,250,10,10);
setTimeout(animate,33);
}
}
animate();
}draw1('myCanvas');
</script>
3.记忆要绘制的形状
主要问题：准确记忆要绘制的对象的内容及位置
方法：对象和数组
步骤：
1）.不管形状的数量有多少，首先考虑如何存储每个形状的位置值。
解决方法：每个形状所需的位置值：x,y，通过创建JS类来创建形状对象，如下：
var shape = function(x,y){
this.x = x;
this.y = y;
};
2）.在不复制代码的情况下如何绘制每个形状。
解决办法：向数组中添加形状对象（push：无须知道数组最后一个元素的序号，push自动将对象添加到数组的最末端）
var shapes = new array(); shapes.push(new shape(50,50)); shapes.push(new shape(50,150)); shapes.push(new shape(50,250));
现在，得到了一组形状，每个形状都有各自的x，y值，这些值存在shapes中
3）.将这些形状从数组中取出并更新他们的位置（使之产生动画效果），然后绘制这些形状。
解决办法：在动画内部设置一个for循环
function animate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
var shapesLength = shapes.length;
for(var i=0;i<shapesLength;i++){
var temshape = shapes[i];
temshape.x++; // 每次x方向向右移动1
context.fillRect(temshape.x,temshape.y,10,10) // 画矩形
};
if(playAnimation){
setTimeout(animate,33);
}
}
4).随机产生形状
更改shape类来定义形状的宽高
var shape = function(x,y,width,height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
然后为每个形状随机选取起始位置和大小
for(var i = 0;i<10;i++){
var x = Math.random()*250;
var y = Math.random()*250;
var width = height = Math.random()*50;
shapes.push(new shape(x,y,width,height));
}
更改fillrect方法的调用，一边采取新的宽高
context.fillRect(temshape.x,temshape.y,temshape.width,temshape.height);
5).改变方向
思路：增加或减少x,y的值
解决：修改 temshape.x++
比如：temshape.x += 2;
temshape.y++;
这样的话，每次动画循环，都会向右+2，向下+1，从而产生向右对角线方向移动的效果.
或者，动画循环中，将x,y设为随机值,
temshape.x = Math.random()*4-2;
temshape.y = Math.random()*4-2;
这样会让动画运动无规则
-----------------------完整代码-----------------------
以下代码：随机位置，随机尺寸的矩形动画
<script>
function draw1(id){
var myCanvas =$('#myCanvas');
var context =myCanvas.get(0).getContext("2d");
var canvasWidth = myCanvas.width();
var canvasHeight = myCanvas.height();
var playAnimation = true;
var startButton = $('#startAnimation');
var stopButton = $('#stopAnimation');
startButton.hide();
startButton.click(function(){
$(this).hide();
stopButton.show();
playAnimation = true;
animate();
})
stopButton.click(function(){
$(this).hide();
startButton.show();
playAnimation = false;
})
var shape = function(x,y,width,height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
var shapes = new Array();
for(var i = 0;i<10;i++){
var x = Math.random()*250;
var y = Math.random()*250;
var width = height = Math.random()*50;
shapes.push(new shape(x,y,width,height));
}
function animate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
var shapesLength = shapes.length;
for(var i=0;i<shapesLength;i++){
var temshape = shapes[i];
// 动画循环中，将x,y设为随机值,
temshape.x = Math.random()*200-2;
temshape.y = Math.random()*200-2;
context.fillRect(temshape.x,temshape.y,temshape.width,temshape.height)
};
if(playAnimation){
setTimeout(animate,33);
}
}
animate();
}draw1('myCanvas');
</script>
---------------------------------------------------------------------------
扩展：随机函数Math.random();
Math.random()是0~1之间的随机函数
Math.round()是四舍五入取整的函数
Math.ceil()向上取整函数
0~1之间的随机整数:Math.round(Math.random());
0~10之间的随机整数:Math.round(Math.random()*10);
5~10之间的随机整数:Math.round(Math.random()*5+5);
10~20之间的随机整数:Math.round(Math.random()*10+10);
20~100之间的随机整数:Math.round(Math.random()*80+20);
由上：
x~y之间的随机整数:
Math.round(Math.random()*(y-x))+x);
0~x之间的随机整数:
Math.round(Math.random()*x);
1~x之间的随机整数:
Math.ceil(Math.random()*x);
以上为学习笔记，如果错误请指出，不甚感激！
资料《 HTML5 CANVAS基础教程 》
-------------
后面全是物理知识啊，我只能哈哈了，此刻心情，五味杂瓶，
canvas学习之制作动画的更多相关文章
- canvas学习之小球动画
项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...
- canvas学习之树叶动画
项目地址:http://pan.baidu.com/s/1geJgqen 今天用canvas做了一个树叶发芽到凋落的动画,当然还有很多不完善的地方,不过也让我体会到了,做动画技术占2分,算法占8分.这 ...
- canvas学习之粒子动画
项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...
- HTML5标签canvas制作动画
摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...
- CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
- requestAnimationFrame制作动画：旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- canvas学习笔记，实用知识点总结（上）
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
随机推荐
- Apache Spark源码走读之19 -- standalone cluster模式下资源的申请与释放
欢迎转载,转载请注明出处,徽沪一郎. 概要 本文主要讲述在standalone cluster部署模式下,Spark Application在整个运行期间,资源(主要是cpu core和内存)的申请与 ...
- PHP 开发 APP 接口 学习笔记与总结 - XML 方式封装通信接口
1.PHP 生成 XML 数据 ① 拼接字符串 ② 使用系统类(DomDocument,XMLWriter,SimpleXML) 例1 使用 PHP 系统类中的 DomDocument 类: < ...
- ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签
今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...
- PDO 学习与使用 ( 一 ) ：PDO 对象、exec 方法、query 方法与防 SQL 注入
1.安装 PDO 数据库抽象层 PDO - PHP Data Object 扩展类库为 PHP 访问数据库定义了一个轻量级的.一致性的接口,它提供了一个数据访问抽象层,针对不同的数据库服务器使用特定的 ...
- [教程] 以本论坛为例，手把手教你使用按键精灵POST登陆网页
本帖最后由 isaacc 于 2012-2-26 11:08 编辑 整个操作,很无脑.只要你够勤快,你学不会,你来咬我.懒人和伸手党就直接复制代码去玩吧,但我不是叫你拿去干坏事. 准备工具:WPE和I ...
- MyBatis代码自动生成
MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的ORM框架,所以主要的工作就是配置Mapping映射文件,但是由于手写映射文件很容易出错,所以可利用MyBatis生成器自动生成实 ...
- mysql创建外键出错（注意数据库表字段排序）
1. 两个字段的类型或者大小不严格匹配.例如,如果一个是int(10),那么外键也必须设置成int(10),而不是int(11),也不能是tinyint.另外,你还必须确定两个字段是否一个为 sig ...
- 【Java 基础篇】【第二课】基本数组类型
就像第一章所说一样,这次学习为了快,因此说明性的文字就不想写太多了,直接帖代码吧,代码当中尽量加一些注释: package a.b; public class test { static void B ...
- Delphi自定义窗口过程WinProc
unit ScWndProc; interface uses Forms, Messages; const DDGM_FOOMSG = WM_USER; //自定义消息 implementation ...
- oracle中截取某个字符前面和后面的值
创建测试表及数据 create table test(name varchar2(10)); insert into test values ('2-15');insert into test val ...