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. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  2. Design Pattern——单一职责原理

    在类的职责分离上多考虑,做到单一职责,这样的代码才能做到易于维护,易扩展,灵活多样.

  3. @Scheduled(cron = "0 0 * * * ?")实现定时任务

    //每一个小时执行一次 @Scheduled(cron = "0 0 * * * ?") public void saveDailyScoreScheduled() { try { ...

  4. 第八十一节，CSS3变形效果

    CSS3变形效果 学习要点: 1.transform 2.transform-origin 3.浏览器版本 本章主要探讨HTML5中CSS3的变形效果,通过变形效果,可以平移.缩放和旋转元素的功能.  ...

  5. 手动新建MVC控制器和视图，以及数据显示的问题

    一,在C#.NET的MVC项目添加一个控制器,在这个控制器有一个index方法,你可以在index方法上鼠标右键选择添加视图,这可以创建一个包含index.cshtml的View视图的文件夹 < ...

  6. deepin2014.1快捷键

    初试deepin2014.1,发现windows很多快捷键在deepin中也完美支持,举例如下: ctrl+shift+n : 新建文件夹 窗口键+E:打开文件系统 窗口键+TAB:3D切换桌面 al ...

  7. 3、Data对象

    1.创建part1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. JSP的改动需要重启应用服务器才能生效？

    PLM的版本由2013版升级到2016版,部署到应用服务器tomEE的war包也更新了,今天在Linux服务器上hot fix一个JSP页面的时候发现改动没有生效,要重启tomEE才生效,纳闷了一下才 ...

  9. LeetCode OJ 84. Largest Rectangle in Histogram

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  10. 洛谷-笨小猴-NOIP2008提高组复赛

    题目描述 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设m ...