Canvas 数学、物理、动画学习笔记一
Canvas 第五章 数学、物理和运动学习笔记
让人映像深刻的运动，需要我们不只是简单的知道如何移动对象，还需要知道怎么按用户期望看到的方式去移动它们。这些需要基于数学知识的基本算法和物理学作用。
基于点和矢量的简单运动提供了一个基础，现在可以去创建些例如碰墙弹回和别一个有点摩擦的混合。之后，我们将回过来讲讲非直线式运动。例如：圆、螺旋型和复杂的贝塞尔曲线的。我们还将涉及影响运动的重力。最后，我们将以讨论缓动和如何使用它来做好基于数学的运动结束本章。
移动一根直线
作为最简单的运动，水平上线的移动一个物体。我们只需要每次绘制时改变x,y值即可。
因此，对于我们的运动绘图来说。我们需要创建一个定时器，并且调用一个能够在每一帧绘制或更新绘制的函数。本章的例子都会使用类似的这种方法来实现。首先，让我们来准备canvasApp()函数需要的基本变量。对于这个基本的运动，我们将创建一个基本的speed变量，我们将在每次调用drawscreen()函数时将这个值交给运动对象的y值。变量x,y 是我们将要在canvas 中移动 的对象的初始位置。
var speed = 5;
var y = 10;
var x = 250;
创建完这些变量后，我们来创建一个每33毫秒调用drawScreen()函数的定时器。这个函数让我们在canvas 里移动和擦除元素。
setInterval(drawScreen,33);
在drawScreen()函数里，我们给y变量每次增加speed值
y += speed;
最后，我们在canvas 里画圆。我们用x,y的当前值来定位这个圆。因为y一直在变，我们可以看到圆在往下移。
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
如果要往上移这个圆，我们可以减去speed,如果要左右移，我们可以修改x的值，要斜着移动，可以同时改变x,y的值。
下面是范例代码
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
function drawScreen() {
context.fillStyle = '#EEE';
//context.fillRect(0,0,theCanvas.width,theCanvas.height);
context.strokeStyle = '#000';
//context.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);
y += speed;
context.fillStyle = '#000';
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
}
theCanvas = document.getElementById('canvasOne');
context = theCanvas.getContext("2d");
var x = 150,
y = 10,
speed = 5;
setInterval(drawScreen,100);
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support canvas
</canvas>
</div>
</body>
</html>
温习一下canvas 的基本API
由id得到canvas 对象 theCanvas = document.getElementById('canvasOne');
context theCanvas.getContext("2d");
fillStyle 填充样式 fillRect 填充矩形
strokeStyle 勾框样式 strokeRect 只有框的， beginPath 开始 closePath 结束 fill填充
两点间的移动 线性距离
Canvas 数学、物理、动画学习笔记一的更多相关文章
- Android动画学习笔记-Android Animation
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
- Unity Shader序列帧动画学习笔记
Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...
- HTML5 Canvas画图与动画学习59例
HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
- Windows Phone 7 ListBox 列表项渐显加载动画学习笔记
在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...
- Chipmunk-js物理引擎学习笔记
一.基本概念## 空间:在Chipmunk中,空间是所有对象容器.因此,刚体.形状.链接节点等对象都需要添加到空间中.空间控制这些对象的相互作用. 刚体:物理上的刚体指的是在运动和受力作用后,形状和大 ...
- UIView动画学习笔记
UIView的动画是通过修改控件的属性来达到动画的效果,如:渐变, 移动. 废话不多说,直接上代码: - (void)loadView{ [super loadView]; _leftView = [ ...
- Silverlight动画学习笔记(三)：缓动函数
(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
随机推荐
- Linux修改SSH端口和禁止Root远程登陆
Linux修改ssh端口22 vi /etc/ssh/ssh_config vi /etc/ssh/sshd_config 然后修改为port 8888 以root身份service sshd res ...
- sf中schedule设定
博客园龄有两年多了,看了一下我发的文章数和最后发布的日期,不禁的心头一怔,已经有一年都没有写更新博客了.突然想起一个句子好像说的是我:间歇性踌躇满志,持续性懒惰等死.最近也看到一位好朋友的qq个性签名 ...
- wakeup_train运行遇到的问题记录
运行前需要更改的地方: 1.matlab安装的路径以及matlab的license文件 2.噪声的路径;background.scp,以及噪声文件 3.run.sh文件中一处f ...
- 工艺成型及仿真、铸造工艺及仿真ProCAST软件入门认识介绍
视频源:技术邻 关键词:ProCAST.工艺成型及仿真.铸造工艺及仿真 简介:ProCAST 软件是由美国 USE 公司开发的铸造过程的模拟软件采用基于有限元(FEM)的数值计算和综合求解的方法,对铸 ...
- L3-007. 天梯地图
L3-007. 天梯地图 题目链接:https://www.patest.cn/contests/gplt/L3-007 Dijstra 这题是Dijstra的变形,麻烦的是两种最短路的相同距离时的选 ...
- spoj1811:Longest Common Substrin
题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=2796 把一个字符串做出后缀自动机,另一个字符串与之匹配. #include<cs ...
- 二、WCF应用的通信过程
注:本文为学习摘抄,原文地址:http://www.cnblogs.com/iamlilinfeng/archive/2012/09/26/2703759.html 一.概述 WCF能够建立一个跨平台 ...
- 翻扣告诉你外出旅游时实用的一些小tips
很多人出行都会带着大包小包,东西胡乱塞成一团,导致每次要用的时候都翻个遍.所以今天游游君为大家推荐几个出门旅行的小技巧. 收拾行李时,把鞋子放进浴帽里.浴帽很容易洗干净,还可以防止鞋子把干净的衣服弄脏 ...
- document.onreadystatechange()来判断页面加载完
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(docum ...
- Java 内部类和匿名内部类
1.内部类: /* 局部内部类: 在一个类 的方法内部定义另外一个类,那么另外一个类就称作为局部内部类. 局部内部类要注意的细节: 1. 如果局部 内部类访问了一个局部变量,那么该局部变量必须使用fi ...