匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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. 基于SSM实现的简易员工管理系统

    之前自学完了JAVA基础,一直以来也没有做什么好玩的项目,最近暑假,时间上比较空闲,所以又学习了一下最近在企业实际应用中比较流行的SSM框架,以此为基础,通过网络课程,学习编写了一个基于SSM实现的M ...

  2. myeclipse eclipse创建maven web项目时 index.jsp报错

    第一种办法 解决办法: ---------------------------------------------------------------------------------------- ...

  3. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  4. Java类加载原理解析

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt229 2       Java虚拟机类加载器结构简述 2.1    JVM三 ...

  5. springboot 入门一 hello world!

    微服务框架springboot,目的是用来简化新Spring应用的初始搭建以及开发过程.简化的代价,就是约定俗成很多规则,比如默认读取的配置文件名是application.properties 必需在 ...

  6. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  7. 201521123087 《Java程序设计》第3周学习总结

    1.本周学习总结 2. 书面作业 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; publ ...

  8. 201521123076《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

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

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  10. jQuery 简介，与js的对比

    jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件. <script src="jquery-1 ...