匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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. geotrellis使用（三十二）大量GeoTiff文件实时进行TMS服务

    前言 在上一篇文章中我讲了如何直接将Geotiff文件发布为TMS服务,在其中只讲了单幅Geotiff的操作,其实单幅这种量级的数据对Geotrellis来说就是杀鸡焉用牛刀,Geotrellis针对 ...

  2. SQL 软解析和硬解析详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt329 当客户端进程,将SQL语句通过监听器发送到Oracle时, 会触发一个 ...

  3. Unity3d&C#分布式游戏服务器ET框架介绍-组件式设计

    前几天写了<开源分享 Unity3d客户端与C#分布式服务端游戏框架>,受到很多人关注,QQ群几天就加了80多个人.开源这个框架的主要目的也是分享自己设计ET的一些想法,所以我准备写一系列 ...

  4. R0~R16寄存器作用(转)

    R0-R3     用作传入函数参数,传出函数返回值.在子程序调用之间,可以将 r0-r3 用于任何用途. 被调用函数在返回之前不必恢复 r0-r3.如果调用函数需要再次使用 r0-r3 的内容,则它 ...

  5. react 入门

    一:virtual DOM  虚拟DOM树 在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM. 虚拟DO ...

  6. YYHS-NOIP2017SummerTraining0914-问题 A: 组合数问题

    题目描述 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1, 2, 3)三个物品中选择两个物品可以有(1, 2),(1, 3),(2, 3)这三种选择方法.根据组合数的定义 ...

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

    1. 本周学习总结 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致有些元素没有删 ...

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

    1. 本章学习总结 一些注意: (1)在JAVA中,不加后缀的浮点数被默认为double型,如果要用float型就要在数据后加上f或F后缀,如float a=32.6f(正确);float a=32. ...

  9. 201521123068《Java程序设计》第2周学习总结

    1.本周学习总结 认识了各种类型与变量的使用 学习运算符的基本使用 变量命名不可以使用数字和一些特殊字符(如*.&.%等)作为开头: 变量名称不可以与Java关键词同名 学习了类与对象的区别 ...

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

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 1.网络编程概述 (1)网络模型 OSI参考模型 TCP/IP参考模型 (2)网络通讯要素 IP地址 端口 ...