匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script>

         window.onload = function () {

             var oCanvas = document.querySelector("#canvas"),

                 oGc = oCanvas.getContext('2d'),

                 width = oCanvas.width, height = oCanvas.height,

                 x = 0;

             function drawBall( x, y, cxt ){

                 cxt.fillStyle = '#09f';

                 cxt.beginPath();

                 cxt.arc( x, y, 20, 0, 2 * Math.PI );

                 cxt.closePath();

                 cxt.fill();

             }

             ( function linear(){

                 oGc.clearRect( 0, 0, width, height );

                 drawBall( x, height / 2, oGc );

                 x += 2;

                 console.log( x );

                 requestAnimationFrame( linear );

             } )();

         }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="1200" height="600"></canvas>

 </body>

上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动.

我们可以把小球封装成一个对象:

ball.js文件：

 function Ball( x, y, r, color ){

     this.x = x || 0;

     this.y = y || 0;

     this.radius = r || 20;

     this.color = color || '#09f';

 }

 Ball.prototype = {

     constructor : Ball,

     stroke : function( cxt ){

         cxt.strokeStyle = this.color;

         cxt.beginPath();

         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );

         cxt.closePath();

         cxt.stroke();

     },

     fill : function( cxt ){

         cxt.fillStyle = this.color;

         cxt.beginPath();

         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );

         cxt.closePath();

         cxt.fill();

     }

 }

该小球对象，可以定制位置半径和颜色，支持两种渲染方式（描边和填充）

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./ball.js"></script>

     <script>

         window.onload = function () {

             var oCanvas = document.querySelector("#canvas"),

                 oGc = oCanvas.getContext('2d'),

                 width = oCanvas.width, height = oCanvas.height,

                 ball = new Ball( 0, height / 2 );

             (function linear() {

                 oGc.clearRect(0, 0, width, height);

                 ball.fill( oGc );

                 ball.x += 2;

                 requestAnimationFrame(linear);

             })();

         }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="1200" height="600"></canvas>

 </body>

 斜线匀速运动：

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./ball.js"></script>

     <script>

         window.onload = function () {

             var oCanvas = document.querySelector("#canvas"),

                 oGc = oCanvas.getContext('2d'),

                 width = oCanvas.width, height = oCanvas.height,

                 ball = new Ball( 0, height );

             (function linear() {

                 oGc.clearRect(0, 0, width, height);

                 ball.fill( oGc );

                 ball.x += 2;

                 ball.y -= 1;

                 requestAnimationFrame(linear);

             })();

         }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="1200" height="600"></canvas>

 </body>

 任意方向的匀速运动（速度分解）

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./ball.js"></script>

     <script>

         window.onload = function () {

             var oCanvas = document.querySelector("#canvas"),

                 oGc = oCanvas.getContext('2d'),

                 width = oCanvas.width, height = oCanvas.height,

                 ball = new Ball( 0, 0 ),

                 speed = 5,

                 vx = speed * Math.cos( 10 * Math.PI / 180 ),

                 vy = speed * Math.sin( 10 * Math.PI / 180 );

             (function linear() {

                 oGc.clearRect(0, 0, width, height);

                 ball.fill( oGc );

                 ball.x += vx;

                 ball.y += vy;

                 requestAnimationFrame(linear);

             })();

         }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="1200" height="600"></canvas>

 </body>

[js高手之路] html5 canvas动画教程 - 匀速运动的更多相关文章

  1. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  2. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  3. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  4. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  5. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  6. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  7. [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

    上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

随机推荐

  1. 格式化JSON字符串

    提出需求 异步调用获取JSON数据时非常不直观,每次都需要格式化一次,才能直观的看到数据集合的结构,现在需要实现输出带缩进的格式. 实现效果 在浏览器的查看源文件中已经实现格式化,如果是页面使用,可以 ...

  2. Keil提示premature end of file错误 无法生成HEX文件

    今天舍友在使用Keil UV4的时候遇到一个问题:Keil提示premature end of file,无法生成hex文件. 代码是没有错误的.那么问题就出在设置上面了. 百度了一圈,发现很少人解答 ...

  3. java枚举类型构造方法为什么是private的

    枚举类型是单例模式的.你需要实例化一次,然后再整个程序之中就可以调用他的方法和成员变量了.枚举类型使用单例模式是因为他的值是固定的,不需要发生改变.更多知识见 http://blog.yemou.ne ...

  4. Intellij Idea 13 快捷键（与Eclipse比对）以及基本的设置

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt404 刚到新公司,用的台式机配置不给力,Eclipse很不给力,几个项目一起 ...

  5. 第1阶段——关于u-boot目标文件start.o中.globl 和.balignl理解(3)

    汇编程序中以.开头的名称并不是指令的助记符,不会被翻译成机器指令,而是给汇编器一些特殊指示,称为伪操作. .globl _start 作用:声明一个_start全局符号(Symbol), 这个_sta ...

  6. poj 2063完全背包

    题意:给出总资金和投资年份 ,n个股票 给出股票价格和其一年的利润.问如何选择能获得最大利润. 思路:股票可以重复选择,完全背包问题,完全背包也是从01背包衍生而行的,其主要区别在于中间那层循环的次序 ...

  7. Vuforia开发完全指南---Vuforia概述

    Vuforia概述 AR(Augmented Reality)增强现实,想必大家都已经很熟悉了.这是当下最热的技术之一,是利用计算机视觉和计算机图像学领域的相关知识将虚拟世界融入到现实生活当中.AR和 ...

  8. 201521123050 《Java程序设计》第8周学习总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 在删除元素时,要注意后续元素位置的前移 2.统计文字中的单词数量并按出现次数排序(题目5-3) 2.1 ...

  9. 201521123056 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...

  10. 201521123003《Java程序设计》第2周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 学习了java中各种数据类型的使用 掌握了基本类型的转换 了解string和stringbuilder的区别以及字符串池的原理 学会了使用package管 ...