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

(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. TCP三次握手,数据传输,四次挥手

    TCP包结构 一个TCP包结构如下: 一个TCP包主要由TCP包头和数据部分组成,包头固定部分为20字节,选项和数据部分根据实际情况设置为4N(N可以为0)字节. 1.16bit源端口和目的端口号,它 ...

  2. jquery——彩色投票进度条

    一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...

  3. 自罚一杯-PHP基础(一)

    hi 懒癌是最可怕的癌了吧,在即将迎来本命年时,给自己定下每天必干的几件成习惯的事情,望不再鸽!! php是我一直在学习的东西,但总以为php简单,难点在需要掌握大量的相关知识,其实并不完全对,php ...

  4. 查找代码错误.java

    class Other{ public int i; } class Something{ public static oivd main(String[]args){ Other o = new O ...

  5. BZOJ 1304: [CQOI2009]叶子的染色

    1304: [CQOI2009]叶子的染色 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 566  Solved: 358[Submit][Statu ...

  6. Jquery 数组操作

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  7. SQL Server DB Type and CLR Type

    这段时间学习SQL Server CLR编程,但是SQL CLR编程,里面所使用的数据类型为CLE TYPE,它多少与 Db TYPE有些区别,在网上找到一个列表http://geekswithblo ...

  8. 如果动态设置json对象的key

    项目中要求动态设置json的key属性,如果按照一般的json设置方法是不行的.假如你把一个key设置为一个变量的话,那么最后js解析出来的就是key为这个变量名而不是这个变量的值. 解决:通过使用 ...

  9. JAVA CDI 学习(2) - Scope 生命周期

    在上一节中,我们已经知道了如何用@Inject实现基本注入,这一节研究Bean实例注入后的“生命周期”,web application中有几种基本的生命周期(不管哪种编程语言都类似) 1.Applic ...

  10. C语言复习(1)

    test.c #include <stdio.h> int main(){ printf("hello\n"); return 0; } 1.预处理阶段 由于在test ...