4.2 加速度
加速度是改变速度大小及方向的一个属性，在物体受力的过程中，会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。
一维坐标系统下的加速度
一维坐标系统下加速度的实现很简单，我们仍然使用小球系统来模拟，为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步：初始化加速度值，在每一帧开始时为速度增加加速度的值。如下：
ball.ax=INITIAL_ACCELERATE_VELOCITY;
ball.vx+=ball.ax; //将此句放置于animationLoop中
二维坐标系统下的加速度
与二维坐标系统下的速度处理方式相同，二维坐标系统下的加速度处理如下：
ball.ax=INITIAL_ACCELERATE_VELOCITY_X;
ball.ay=INITIAL_ACCELERATE_VELOCITY_Y;
ball.vx+=ax; //将此两句放置于animationLoop中
ball.vy+=ay;
重力加速度
重力加速度是一种特殊的加速度。对其的处理可以当作一维坐标（Y轴）系统下的加速度来处理：
ball.vy+=gravity; //gravity是重力加速度常量
已知初始方向及大小的加速度
前面我们实现的都是已知两个正交坐标轴方向加速度大小的运动，但在实际应用中，这种情况很少见，更多的是已知加速度的大小及方向的运动。此时，我们就需要使用之前介绍的三角函数。常见的变换如下：
ax=Math.cos(angle)*A;
ay=Math.sin(angle)*A;
我们对之前在速度处理中实现的鼠标跟随效果进行改进，在其中引入加速度处理,核心代码实现如下：
window.onload=function(){
//初始化变量
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var mouse=utils.captureMousePosition(canvas);
var accelerateSpeed=1;
//绘制箭头
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
//取得由箭头中心指向鼠标位置的向量方向，并旋转箭头
var dx=mouse.x-arrow.x;
var dy=mouse.y-arrow.y;
var angle=Math.atan2(dy,dx);
arrow.rotation=angle;
//通过三角函数求得加速度，并对应改变速度及位置
arrow.vx+=Math.cos(angle)*accelerateSpeed;
arrow.vy+=Math.sin(angle)*accelerateSpeed;
arrow.x+=arrow.vx;
arrow.y+=arrow.vy;
arrow.paint(context);
})();
};
运行代码，会发现效果很像一个水平摆。
加速度实例——宇宙飞船
加速度一个很好的实例就是飞船的起飞和降落。我们会逐渐实现一个简易的飞船。如下，是一个用三角形构成的飞船模型：
function Ship(){
//定义飞船属性
this.x=0;
this.y=0;
this.vx=0;
this.vy=0;
this.rotation=0;
this.width=25;
this.height=20;
this.showFlame=false;
}
Ship.prototype.paint=function(context){
context.save();
//定义画面属性
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.lineWidth=1;
context.strokeStyle='#ffffff';
//绘制飞船
context.beginPath();
context.moveTo(10,0);
context.lineTo(-10,10);
context.lineTo(-5, 0);
context.lineTo(-10, -10);
context.lineTo(10, 0);
context.stroke();
//绘制喷火
if(this.showFlame){
context.beginPath();
context.moveTo(-7.5, -5);
context.lineTo(-15, 0);
context.lineTo(-7.5, 5);
context.stroke();
}
context.restore();
};
以上代码实现了一个简单的飞船模型，飞船在加速时会喷火，如下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Arrow</title>
<style type="text/css">
#canvas {
border-bottom: 1px solid #ffffff;
background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ship.js"></script>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var ship=new Ship();
ship.x=canvas.width/2;
ship.y=canvas.height/2;
var vr=0;
var f=0;
//处理键盘事件
window.addEventListener("keydown",function(event){
console.log(event.keyCode);
switch(event.keyCode){
case 37: //左，逆时针转
vr=-3;
break;
case 39: //右，顺时针转
vr=3;
break;
case 38: //上，加速
f=0.05;
ship.showFlame=true;
break;
}
});
//按键松开时恢复相关属性为默认值
window.addEventListener("keyup",function(event){
ship.showFlame=false;
vr=0;
f=0;
},false);
(function animationLoop(){
window.requestAnimFrame(animationLoop,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
//通过角度和大小来确定加速度，从而确定飞船的速度与位置
ship.rotation+=vr*Math.PI/180;
ship.vx+=Math.cos(ship.rotation)*f;
ship.vy+=Math.sin(ship.rotation)*f;
ship.x+=ship.vx;
ship.y+=ship.vy;
ship.paint(context);
})();
};
</script>
</body>
</html>
如此，实现了一个利用加速度的飞船模型，左右箭头是用来控制旋转方向的，上箭头是用来加速的。但很快飞船就跑出画布了，之后我们会介绍如何来进行边界控制。
- 大小: 3.6 KB
分享到：
相关推荐
9. **最佳实践**：分享HTML5 Canvas开发的最佳实践，包括代码组织、调试技巧以及如何确保兼容性。 10. **社区与资源**：可能还会介绍一些HTML5和Canvas的在线社区、工具、库和框架，帮助读者持续学习和提高。 总的...
在这个"HTML5 Canvas核心技术图形、动画与游戏开发"的PDF扫描版中，读者可以深入学习到Canvas的核心概念和实践技巧。 首先，Canvas的基本使用方法是通过JavaScript API来实现的。这个API提供了大量的绘图命令，如`...
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在...以上就是关于"小程序canvasDemo"项目中涉及的主要技术点，通过学习和实践，你可以掌握微信小程序中canvas的使用技巧，进一步提升你的小程序开发能力。
HTML5的Canvas是一个强大的绘图API，它允许开发者在网页上进行动态的、基于...随着对Canvas的深入理解和实践，你会发现它的潜力无穷无尽。在实际项目中，可以结合CSS3、WebGL等技术，构建更复杂的交互式Web应用。
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个“html5_canvas_...这样的实现不仅方便分享，也为开发者提供了一个学习和实践Canvas API的好平台。
《canvas+js绘制图形的实践探索》 在Web开发领域，HTML5的canvas元素提供了一种强大的机制，允许开发者在浏览器上进行动态图形绘制。这篇博文将深入探讨如何结合JavaScript，利用canvas API来构建一个简单的绘图小...
这个功能在很多场景下都非常有用，比如网页分享、游戏截图、在线编辑器保存草图等。 首先，我们要了解canvas的基本用法。canvas是一个矩形画布，通过JavaScript来控制它的内容。我们可以通过`<canvas>`标签在HTML中...
HTML5 Canvas是Web开发中的一个关键技术，...通过学习和实践这些HTML5 Canvas的核心技术，开发者可以构建出交互性强、视觉效果丰富的Web应用程序，无论是数据可视化、游戏开发还是艺术创作，Canvas都能提供强大的支持。
9. **保存和导出**：Canvas上的内容可以导出为图像，或者使用toDataURL方法生成数据URL，方便分享和存储。 10. **实际应用**：书中实例可能涵盖游戏开发、图表绘制、数据可视化、地图应用等多个实际场景，帮助...
这篇博客"canvas画图测试"可能涉及了使用Canvas进行图形绘制的基础知识和实践技巧。Canvas API的使用通常包括以下几个核心知识点： 1. **Canvas元素**：在HTML中，`<canvas>`标签定义了一个可编程的画布，通过...
2. 用户界面（UI）：Android游戏通常使用自定义View或SurfaceView来实现游戏画面，结合Canvas进行绘制。UI的设计也包括菜单、暂停、设置等交互元素。 3. 图形渲染：游戏可能使用OpenGL ES进行高性能的2D或3D图形...
在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...
1. Canvas绘图：H5游戏常用Canvas API进行动态绘图，实现游戏场景的渲染。通过JavaScript操作Canvas的绘图方法，可以绘制角色、障碍物并实现动画效果。 2. Event Handling：JavaScript的事件监听和处理机制在游戏中...
这个技术的引入极大地扩展了网页的交互性和动态性，尤其在创建复杂的动画效果和游戏场景时表现得尤为出色。在这个特定的场景中，我们讨论的是如何使用HTML5 Canvas实现视频网站的文字弹幕动画特效。 首先，我们要...
H5游戏源码的分享，对于学习者来说是一次宝贵的实践机会，可以了解游戏逻辑、动画效果、用户交互等核心元素的实现方法。 【标签】"游戏"：游戏是软件的一种类型，它可以提供娱乐、挑战或教育功能。H5游戏作为游戏的...
在“H5自写的小游戏源码分享”这...同时，这也是一个很好的学习实践机会，可以提升你的JavaScript编程水平，理解游戏开发中的逻辑思维和问题解决能力。不断练习和学习，你将能够创造出更多有趣、引人入胜的HTML5游戏。
HTML5 Canvas API是Web开发中的一个强大工具，它允许开发者在网页上绘制2D图形，创建动态、交互式的游戏和应用程序。在这个项目中，“games:使用canvas api...在实践中，不断探索和创新，制作出更丰富、更有趣的游戏。
8. **性能优化**：分享关于Canvas性能的技巧，如批处理绘图操作、使用图像数据缓冲区和避免不必要的重绘。 9. **高级应用**：深入探讨更复杂的用例，如粒子系统、游戏开发、图表绘制和数据可视化。 10. **实践案例...
【标题】：“jQuery HTML5微信分享游戏：围住神经猫游戏源码下载” 【描述】：这个资源提供了基于jQuery和HTML5技术开发的微信分享...对于希望从事移动互联网游戏开发的初学者来说，这是一个非常有价值的实践案例。
通过理解和实践这个项目，开发者可以掌握QML中的2D绘图技术，以及如何结合鼠标事件来实现动态的用户交互功能。这对于开发桌面应用、游戏或者任何需要在屏幕上绘制图形的场景都具有很高的实用价值。