如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动。距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大。也就是说,小球的加速度与距离是成正比例关系的。这和缓动很相似,缓动是速度与距离成正比例。假设弹力系数为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. 刷题总结——树的同构(bzoj4337 树上hash)

    Description 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如 ...

  2. Java NIO系列教程(三-十二) Buffer

    原文链接     作者:Jakob Jenkov     译者:airu     校对:丁一 Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到 ...

  3. 洛谷 [P2887] 防晒霜

    贪心 首先以 miSPF 为关键字降序排列,然后对于每一头奶牛寻找满足范围的 SPF 值最大的防晒霜用, 我们发现,因为已经按最小值降序排列,所以对于下界来说若当前奶牛满足,之后的奶牛肯定满足,对上界 ...

  4. 【CF1027A】Palindromic Twist(模拟)

    题意:输入T组字符串,每个字符串都必须改变一次,每个字母改变的规则是变成相邻的字母,字母a只能变b,z只能变y,判断改变后的字符依旧是否能够变成回文串 n<=1e2 思路: #include&l ...

  5. touch上滑加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. json键的不能像值一样拼写的问题

    今天碰到了一个json的键不能拼写的问题 解决方法是  先把json对象作为一个字符串拼写  然后再通过eavl函数转为json对象 $(".select_date").each( ...

  7. 数据结构自己实现——stack

    #define StackSize 100 typedef char DataType; class stack { public: DataType data[StackSize]; int top ...

  8. Codeforces Gym101606 A.Alien Sunset (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017) 寒假第一次组队训练赛,和学长一起训练,题目难度是3颗星,我和猪队友写 ...

  9. Java 界面编程【02】事件注册

    聪明出于勤奋,天才在于积累.——华罗庚 对上次的三个问题的个人理解: 1) 程序首先是从main函数开始执行的,假设main 函数不是 static ,就要先实例化这个类,然后调用 main 方法,这 ...

  10. XSY1659 [HNOI2012]永无乡

    题面 Description 永无乡包含 n 座岛,编号从 1 到 n. 每座岛都有自己的独一无二的重要度,按照重要度可以将这n座岛排名,名次用 1到n来表示.某些岛之间由巨大的桥连接,通过桥可以从一 ...