匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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. diplay:table-cell和伪元素：after方法让图片居中

    让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 ...

  2. memcache的原理和命中率的总结

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt267 1       Memcache是什么Memcache是danga.c ...

  3. Mac上安装openCV（Java版本）

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt410 Install and use OpenCV 3.0 on Mac O ...

  4. 解决MVC模式文件下载附件中文名称乱码

    解决如下: 进行url编码:Server.UrlPathEncode(file.AttachmentName) return File(file.TempWorkPath, CommonTools.G ...

  5. Prism for Xamarin.Forms

    一.使用环境 OS:Win 10 16273 VS:VS2017- 15.3.4 Xamarin:4.6.3.4,nuget:2.4 Android Emulator:Visual Studio fo ...

  6. NHibernate教程(19) —— 一级缓存

    本节内容 引入 NHibernate一级缓存介绍 NHibernate一级缓存管理 结语 引入 大家看看上一篇了吗?对象状态.这很容易延伸到NHibernate的缓存.在项目中我们灵活的使用NHibe ...

  7. [转载]Web前端和后端之区分，以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  8. MySQL （七）--视图、数据库备份和还原

    1 视图 视图:View,是一种有结构(有行有列)但是没结果(结构中不真实存放的数据)的虚拟表,虚拟表的结构来源不是自己定义,而是从对应的基表中产生(视图的数据来源). 示例脚本: CREATE TA ...

  9. 团队作业4---第一次项目冲刺（ALpha）版本 第七天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.随着测试出现了大大小小的一些BUG,但是由于原来写的时候思维定 ...

  10. 201521044091 java 第一周总结

    1.本周学习总结 (1)第一次开始接触java语言,有些用法还是和c和c++有点差异,需要不断去学习 (2)java其实不仅仅一种高级语言,它包括的还有它的整套体系. 2. 书面作业 1.为什么jav ...