[js高手之路] html5 canvas动画教程 - 匀速运动
匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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动画教程 - 匀速运动的更多相关文章
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...
- [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
随机推荐
- geotrellis使用（三十二）大量GeoTiff文件实时进行TMS服务
前言 在上一篇文章中我讲了如何直接将Geotiff文件发布为TMS服务,在其中只讲了单幅Geotiff的操作,其实单幅这种量级的数据对Geotrellis来说就是杀鸡焉用牛刀,Geotrellis针对 ...
- UWP 手绘视频创作工具技术分享系列
开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做 ...
- 10个经典的Java面试题集合（转载）
1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...
- 详解java设计模式之责任链模式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt175 从击鼓传花谈起 击鼓传花是一种热闹而又紧张的饮酒游戏.在酒宴上宾客依次 ...
- ORACLE ROWNUM解析
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp53 [align=middle;" align="le ...
- RAISERROR
RAISERROR 可以抛出一个错误,并被程序捕获,在存储过程经常使用: 是否进入Catch代码执行区域,在于错误严重等级设置 RAISERROR ('无效数据', 11 , 1) 第一个参数:自定义 ...
- wineshark分析抓取本地回环包
wineshark分析抓取本地回环包 摘要 由于windows系统没有提供本地回环网络的接口,用Wireshark监控网络的话看不到localhost的流量.想要获取本地的网络数据包,可以通过一款小巧 ...
- 第二次项目冲刺（Beta阶段）5.24
1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #63Web输出以文件名为标题 #63 ...
- 团队作业4---第一次项目冲刺（ALpha）版本 第七天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.随着测试出现了大大小小的一些BUG,但是由于原来写的时候思维定 ...
- 201521123097《Java程序设计》第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...