Canvas学习笔记——弹动
如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动。距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大。也就是说,小球的加速度与距离是成正比例关系的。这和缓动很相似,缓动是速度与距离成正比例。假设弹力系数为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学习笔记——弹动的更多相关文章
- Canvas学习笔记——缓动
当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下.将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是 ...
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
- canvas学习笔记,实用知识点总结(上)
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记一
为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- canvas学习笔记(一)-认识canvas
canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...
随机推荐
- 刷题总结——树的同构(bzoj4337 树上hash)
Description 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如 ...
- Java NIO系列教程(三-十二) Buffer
原文链接 作者:Jakob Jenkov 译者:airu 校对:丁一 Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到 ...
- 洛谷 [P2887] 防晒霜
贪心 首先以 miSPF 为关键字降序排列,然后对于每一头奶牛寻找满足范围的 SPF 值最大的防晒霜用, 我们发现,因为已经按最小值降序排列,所以对于下界来说若当前奶牛满足,之后的奶牛肯定满足,对上界 ...
- 【CF1027A】Palindromic Twist(模拟)
题意:输入T组字符串,每个字符串都必须改变一次,每个字母改变的规则是变成相邻的字母,字母a只能变b,z只能变y,判断改变后的字符依旧是否能够变成回文串 n<=1e2 思路: #include&l ...
- touch上滑加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- json键的不能像值一样拼写的问题
今天碰到了一个json的键不能拼写的问题 解决方法是 先把json对象作为一个字符串拼写 然后再通过eavl函数转为json对象 $(".select_date").each( ...
- 数据结构自己实现——stack
#define StackSize 100 typedef char DataType; class stack { public: DataType data[StackSize]; int top ...
- Codeforces Gym101606 A.Alien Sunset (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))
2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017) 寒假第一次组队训练赛,和学长一起训练,题目难度是3颗星,我和猪队友写 ...
- Java 界面编程【02】事件注册
聪明出于勤奋,天才在于积累.——华罗庚 对上次的三个问题的个人理解: 1) 程序首先是从main函数开始执行的,假设main 函数不是 static ,就要先实例化这个类,然后调用 main 方法,这 ...
- XSY1659 [HNOI2012]永无乡
题面 Description 永无乡包含 n 座岛,编号从 1 到 n. 每座岛都有自己的独一无二的重要度,按照重要度可以将这n座岛排名,名次用 1到n来表示.某些岛之间由巨大的桥连接,通过桥可以从一 ...