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. linux的命令使用记录

    iptables禁止53端口的出包(dns) iptables -A OUTPUT -p udp --dport 53 -j DROP linux查看网络监听端口 netstat -npl 文件复制 ...

  2. HP Autonomy KeyView入门使用&Maven打包流程

    正文:使用自带的KeyView.jar可能报各种各样的错误,比如no manifest,找不到main方法等等,这里需要自己把需要用到的Filter类和KeyView.jar一起打包,并修改manif ...

  3. Selenium 中文API

    Selenium 中文API   转自:http://blog.csdn.net/lh9529/article/details/3946567 概念 Selenium 通过命令进行驱动.Seleniu ...

  4. Unity3d中Dictionary和KeyValuePair的使用

    using UnityEngine; using System.Collections; using System.Collections.Generic;public class test : Mo ...

  5. eclipse 使用hadoop-plugins 插件出现EOFException问题

    相当郁闷的一个问题,之前也看了好多外国的网站,也没有解答 主要出在了使用http访问 http://192.168.5.128:50030/jobtracker.jsp http://192.168. ...

  6. 【MySQL】filesort.cc 源代码阅读笔记

    最近阅读了部分MySQL排序的代码,把心得记录一下. 参考代码 MySQL: 文件: filesort.cc 函数: filesort() 排序过程伪代码 function filesort(tabl ...

  7. 设计模式--命令模式（Command）

    基本概念:  Command模式也叫命令模式 ,是行为设计模式的一种.Command模式通过被称为Command的类封装了对目标对象的调用行为以及调用参数,命令模式将方法调用给封装起来了. 命令模式的 ...

  8. CSS中RGBA的兼容方法以及透明度计算方法

    CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,left bottom,from(r ...

  9. CSU 1333 Funny Car Racing

    最短路问题稍微复杂了一点,松弛的时候多判断一些条件就可以了.第一次用SPFA写最短路. #include<cstdio> #include<cmath> #include< ...

  10. magento数据添加

    1.第一种方法是一个字段一个字段地添加! $record = Mage::getModel('warehouse/record');      $record->addData($postDat ...