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 数学、物理、动画学习笔记一的更多相关文章

  1. Android动画学习笔记-Android Animation

    Android动画学习笔记-Android Animation   3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...

  2. Unity Shader序列帧动画学习笔记

    Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...

  3. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  4. Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

    在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...

  5. Chipmunk-js物理引擎学习笔记

    一.基本概念## 空间:在Chipmunk中,空间是所有对象容器.因此,刚体.形状.链接节点等对象都需要添加到空间中.空间控制这些对象的相互作用. 刚体:物理上的刚体指的是在运动和受力作用后,形状和大 ...

  6. UIView动画学习笔记

    UIView的动画是通过修改控件的属性来达到动画的效果,如:渐变, 移动. 废话不多说,直接上代码: - (void)loadView{ [super loadView]; _leftView = [ ...

  7. Silverlight动画学习笔记(三)：缓动函数

    (一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...

  8. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  9. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

随机推荐

  1. php 编程效率（2）

    1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和非静态方法的 ...

  2. LDAP协议

    很多人虽然会使用dsadd等命令添加用户,但是dsadd的命令说明里面并没有涉及到dc,cn,ou的含义,很多人都不明白,这里是微软的技术支持人 员的回信,希望对大家有帮助. CN, OU, DC 都 ...

  3. CodeForces 699A Launch of Collider

    枚举相邻两个$a[i]$与$a[i+1]$,如果$s[i]=R$并且$s[i+1]=L$,那么$i$和$i+1$会碰撞,更新答案. #pragma comment(linker, "/STA ...

  4. ubuntu环境下jdk安装及jenkins安装

    本文内容参考http://jingyan.baidu.com/article/c33e3f48a3365dea15cbb5c9.html 1 jdk下载 安装 http://www.oracle.co ...

  5. 邮件发送 java

    package com.sun.mail; import java.io.File;import java.io.IOException;import java.io.UnsupportedEncod ...

  6. hdu_5890_Eighty seven（bitset优化DP）

    题目链接:hdu_5890_Eighty seven 题意: 50个数,10W个询问,每次问删掉第i,j,k个数后,是否存在一种选10个数和为87的方案,只需要输出 ’Yes’ 或者 ’No’ 题解: ...

  7. hdu_3247_Resource Archiver(AC自动机+bfs+TSP)

    题目链接:hdu_3247_Resource Archiver 题意: 有n个资源串,m个病毒串,现在要将所有的资源串整合到一个串内,并且这个串不能包括病毒串,问最短的串长为多少 题解: 将资源串和病 ...

  8. Java8 (1)

    参考资料: <Java8 in Action> Raoul-Gabriel Urma 一.jdk8 客观的说,Java8是一次有重大演进的版本,甚至很多人认为java8所做的改变,在许多方 ...

  9. VS2010编译错误 LNK 2019 unresolved external symbol错误解决办法

    Link错误有很多种,主要是没有在连接中加入lib文件路径,或者lib配置正确,传参错误 一个solution里面多个project之间引用其他project函数会出现这个错误,由于包含了头文件而没处 ...

  10. 关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别

    :first:选择第一个出现符合的元素 :first-child:选择限制条件中的第一个元素,并且必须和冒号前面的标签一致 :first-of-type:选择所有限制条件下的第一个冒号前面的标签元素, ...