匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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. mysql：ip地址连接

    2. 为用户授权 授权格式:grant 权限 on 数据库.* to 用户名@登录主机 identified by "密码"; 2.1登录MYSQL(有ROOT权限),这里以ROO ...

  2. Http和Socket详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp59   这不是同一层的协议 socket是一个针对TCP和UDP编程的借 ...

  3. 201521123084 《Java程序设计》第4周学习总结

    第4周作业-面向对象设计与继承 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 总结: (1)学会了如何给类和方法进行简单的注释: (2)学 ...

  4. 【Alpha阶段】第五次 Scrum Meeting

    每日任务 1.本次会议为第 五次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在陆大召开,召开本次会议为20分钟,汇报自己的任务和讨论接下来的任务: 一.今日站立式会议照 二.每 ...

  5. 团队作业4——第一次项目冲刺（Alpha版本）2st day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 界面 1.四个用户登录界面已经完成. 2.界面内的功能完成了一小部分. 登陆部分 1.QQ授权已经申请,还未通过. 2.通过好 ...

  6. 201521123093 java 第八周总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 1.泛型简介:同一个代码可以被不同的对象重用 2.使用泛型的好处:允许 ...

  7. 201521123103 《Java学习笔记》 第七周学习总结

    一.本周学习总结 1.以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 二.书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码如下: pub ...

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

    1. 本周学习总结 2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商城 ...

  9. 201521123066 《Java程序设计》第三周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 创建自己的异常 1.自定义异常要继承已有的异常,需要手动throw异常:根据继承的异常不同以及具体情况,选择 ...