如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动。距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大。也就是说,小球的加速度与距离是成正比例关系的。这和缓动很相似,缓动是速度与距离成正比例。假设弹力系数为spring,则有公式:

ax = (targetX - currentX) * spring;
ay = (targetY - currentY) * spring; vx += ax;
vy += ay;

举个例子:

 

// > 16 & 0xff,
g = color >> 8 & 0xff,
b = color >> 0xff,
a = (alpha 1) ? 1 : alpha);

if(a === 1) {
return 'rgb('+r+','+g+','+b+')';
} else {
return 'rgba('+r+','+g+','+b+','+a+')';
}
};

window.utils.parseColor = function (color, toNumber) {
if (toNumber === true) {
if (typeof color === 'number') {
return (color | 0); //chop off decimal
}
if (typeof color === 'string' && color[0] === '#') {
color = color.slice(1);
}
return window.parseInt(color, 16);
} else {
if (typeof color === 'number') {
color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
}
return color;
}
};

window.utils.containsPoint = function (rect, x, y) {
return !(x rect.x + rect.width ||
y rect.y + rect.height);
};

window.utils.intersects = function (rectA, rectB) {
return !(rectA.x + rectA.width 0) {
ctx.stroke();
}
ctx.restore();
};

Ball.prototype.getBounds = function () {
return {
x: this.x - this.radius,
y: this.y - this.radius,
width: this.radius * 2,
height: this.radius * 2
};
};

function Ship () {
this.x = 0;
this.y = 0;
this.width = 25;
this.height = 20;
this.rotation = 0;
this.showFlame = false;
}

Ship.prototype.draw = function (ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);

ctx.lineWidth = 1;
ctx.strokeStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(-10, 10);
ctx.lineTo(-5, 0);
ctx.lineTo(-10, -10);
//ctx.lineTo(10, 0);
ctx.closePath();
ctx.stroke();

if (this.showFlame) {
ctx.beginPath();
ctx.moveTo(-7.5, -5);
ctx.lineTo(-15, 0);
ctx.lineTo(-7.5, 5);
ctx.stroke();
}
ctx.restore();
};

(function() {
var canvas = document.createElement('canvas'),
a = document.getElementById('a');
canvas.id = 'c1';
canvas.width = 500;
canvas.height = 500;

a.appendChild(canvas);

var canvas = document.getElementById('c1'),
ctx = canvas.getContext('2d');

var ball = new Ball(20,Math.random() * 0xffffff),
mouse = utils.captureMouse(canvas),
targetX = canvas.width / 2,
targetY = canvas.height / 2,
vx = 0,
vy = 0,
ax = 0,
ay = 0,
requestId,
friction = 0.95,
gravity = 1,
spring = 0.01;

(function() {
requestId = window.requestAnimFrame(arguments.callee,canvas);
ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.beginPath();
ctx.moveTo(mouse.x,mouse.y);
ctx.lineTo(ball.x,ball.y);
ctx.stroke();

ax = (mouse.x - ball.x) * spring;
ay = (mouse.y - ball.y) * spring;

vx += ax;
vy += ay;
vy += gravity;

vx *= friction;
vy *= friction;

ball.x += vx;
ball.y += vy;

ball.draw(ctx);
})();
})();
// ]]>

 

//

 

//

 

//

Canvas学习笔记——弹动的更多相关文章

  1. Canvas学习笔记——缓动

    当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下.将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是 ...

  2. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  3. canvas学习笔记,实用知识点总结(上)

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  4. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  7. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

  8. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  9. canvas学习笔记(一)-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

随机推荐

  1. adb shell am命令

    adb shell am命令是在cmd命令行可以通过命令来启动Activity,Boradcast,Service等,更多使用可以参考下面附件. 比如在cmd串口我们发送广播,广播action是&qu ...

  2. 如何发布自己的服务---zookeeper

    人肉告知的方式:如果你发现你的服务一台机器不够,要再添加一台,这个时候就要告诉调用者我现在有两个ip了,你们要轮询调用来实现负载均衡:调用者咬咬牙改了,结果某天一台机器挂了,调用者发现服务有一半不可用 ...

  3. DataSet的Merge方法合并两张表

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] UniqueConstraint uc = new UniqueConstraint("pk" ...

  4. C++拷贝(复制)构造函数详解

    原文:http://blog.csdn.net/lwbeyond/article/details/6202256/[侵删] 一. 什么是拷贝构造函数 首先对于普通类型的对象来说,它们之间的复制是很简单 ...

  5. Android 4.4 不休眠+不锁屏+默认中文+去除导航栏

    1.不休眠 frameworks/base/packages/SettingsProvider/res/values/defaults.xml 里面60000改成-1,就是不进入休眠. 这个文件还保存 ...

  6. yii 数据库添加,修改,删除相关操作总结

    yii中关于数据信息的添加数据,修改数据,删除数据的相关操作,刚刚学习没几天,仅记录了一些,以后慢慢再充实,有需要的朋友可以看看. 添加数据的方法 (1)save 方法(对象形式操作) $user=n ...

  7. python pyd 加密相关

    Dockerfile RUN 同时执行多条命令 Dokcerfile中的命令每执行一条即产生一个新的镜像,当前命令总是在最新的镜像上执行.如下Dockerfile: RUN cd /usr/share ...

  8. hdu 4506(数学,循环节+快速幂)

    小明系列故事——师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  9. 浅谈HookSSDT和和Resume(恢复)SSDT

     最近在学HookSSDT和针对Hook的ResumeSSDT,避免自己理解有所偏差,把它们写出来,希望大家不吝赐教.(虽然已经是过时了的技术,但是最起码了解其中的原理,嘿嘿嘿.) 转载注明出处:ht ...

  10. vue 之循环添加不同class

    在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...