处理物体超出画布时的三种基本状态,复位,移除,反弹

(1)检测是否越界的核心算法

if( object.x - object.width / 2 > right ||

object.x + object.width / 2 < left ||

object.y - object.height / 2 > bottom ||

object.y + object.height / 2 < top){}

(2)求摩擦力(精度算法)

var v = Math.sqrt( vx * vx + vy * vy );

var angle = Math.atan2(vy,vx);

if(v > f){

v -= f;

}else{

v = 0;

};

vx = Math.cos(angle) * v;

vy = Math.sin(angle) * v;

(3)摩擦力(约等方法,因为精度限制,最后会变为零)

vx *= friction;

vy *= friction;

canvas边界与摩擦力的更多相关文章

  1. HTML5的动画学习历程

    一.三角学原理. function getRadio(d){//根据角度获得弧度,                return d*Math.PI/180;                }, fun ...

  2. as3 公式

    AS3缓动公式:sprite.x += (targetX - sprite.x) * easing;//easing为缓动系数变量sprite.y += (targetY - sprite.y) * ...

  3. HTML5+JavaScript动画基础 完整版 中文pdf扫描版

    <HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...

  4. 【WPF】1、 基本控件的简介

    WPF一直都是断断续续的使用.偶尔用到一下.但是每次间隔比较长,需要重新学习,就写了这篇日志.以后有问题,看这个就可以了解各大概,然后针对细节再另外想办法. 微软的东西真心好,如果什么都不懂,可以直接 ...

  5. canvas总结:线段宽度与像素边界

    在canvas中,我们经常需要绘制线段,主要使用moveTo和lineTo两个方法,moveTo移动至线段起始点,lineTo将线段绘制至终点.同时,绘制线段时可以指定线段的宽度,使用lineWidt ...

  6. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  7. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  8. [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

    上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: <head> <meta charset='utf-8' /> &l ...

  9. 【HTML5 Canvas】计算元件/显示对象经过Matrix变换后在上级/舞台上的bounds(边界矩形rect)

    如上图所示,这样的一个简单矩形,边界矩形是(x:-28, y:-35, width:152, height:128),这是在这个元件/显示对象自己的坐标空间的范围. 那么把这个放到父元件(舞台)中,再 ...

随机推荐

  1. AC日记——行程长度编码 openjudge 1.7 32

    32:行程长度编码 总时间限制:  1000ms 内存限制:  65536kB 描述 在数据压缩中,一个常用的途径是行程长度压缩.对于一个待压缩的字符串而言,我们可以依次记录每个字符及重复的次数.这种 ...

  2. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  3. Mantis1.2.19 在Windows 平台上的安装配置详解

    安装环境: WindowsXP 32 Apache2.2.22+PHP5.4.39+MySQL5.5.28 一.简介 MantisBT是由PHP开发的.基于WEB的缺陷跟踪系统,并采用开源数据库MyS ...

  4. Jedis下的ShardedJedis(分布式)使用方法(一)

    原来项目中有用到Redis用作缓存服务,刚开始时只用一台Redis就能够满足服务,随着项目的慢慢进行,发现一台满足不了现有的项目需求,因为Redis操作都是原子性这样的特性,造成有时同时读写缓存造成查 ...

  5. java 24 - 2 GUI之监听机制和适配器改进窗口关闭

    我们创建了窗体后,就要对窗体进行操作,比如关闭窗口.而这时候就要建立监听机制: 事件监听机制: A:事件源 事件发生的地方 B:事件 就是要发生的事情 C:事件处理 就是针对发生的事情做出的处理方案 ...

  6. jquery插件集

    自定义滚动条jquery-custom-scrollbar 放大镜 fancybox,lightbox,jquery zoom

  7. js的scroll详解

    scrollTop : 滚动条滚动距离        说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容                                           ...

  8. BZOJ 1208: [HNOI2004]宠物收养所

    1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7514  Solved: 2982[Submit][Sta ...

  9. 一种Docker image镜像的取代方案

    在http://openvz.org/Download/templates/precreated中有很多压缩的镜像文件,可以将这些文件下载后采用import方式使用镜像,也可以采用我原来的博文:doc ...

  10. asp.net core 日志

    日志输出是应用程序必不可少的部分,log4net,nlog这些成熟的组件在之前的项目中被广泛使用,在asp.net core的项目中没有找到与之对应的log4net版本,nlog对core提供了很好的 ...