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了 ...
随机推荐
- [USACO15FEB]Superbull (最小生成树)
题目链接 Solution 基本上就是个板子. 因为 \(n\) 很小,只有 \(2000\),所以直接暴力建图,然后跑最小生成树就好了. Code #include<bits/stdc++.h ...
- faster-rcnn 目标检测 数据集制作
本文的目标是制作目标检测的数据集 使用的工具是 python + opencv 实现目标 1.批量图片重命名,手动框选图片中的目标,将目标框按照一定格式保存到txt中 图片名格式(批量) .jpg . ...
- bzoj1433 [ZJOI2009]假期的宿舍 最大流
[ZJOI2009]假期的宿舍 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3429 Solved: 1459[Submit][Status][D ...
- 【CF1020B】Badge(模拟)
题意:给定n个人,每个人指向第a[i]个人,要求输出从每个人开始第一个被访问到两次的人的编号 n<=1e3 思路: #include<cstdio> #include<cstr ...
- 《Linux命令行与shell脚本编程大全 第3版》
第一部分 Linux 命令行 第1章 初识Linux she1.1 什么是Linux 21.1.1 深入探究Linux 内核 31.1.2 GNU 工具 61.1.3 Linux 桌面环境 81 ...
- unix网络编程第2章
time_wait状态 可靠地实现tcp全双工连接的终止; (假设客户端先关闭).服务端再关闭,服务端将发送fin ,客户端此时进入time_wait状态.客户端接收到fin.将回一个ack.如果这 ...
- 升级 GCC 支持C++11 或 configure: error: *** A compiler with support for C++11 language features is required.
configure: error: *** A compiler with support for C++11 language features is required. 参考链接: (1)升级 G ...
- spring+jpa+HiKariCP+P6spy SSH HiKariCP P6spy
=============p6spy准备https://www.cnblogs.com/qgc88===================== 1.简单介绍p6spy,p6spy是一个开源项目,通常使用 ...
- django删除表重建&修改用户密码&base64加密解密字符串&ps aux参数说明&各种Error例子
1.django的queryset不支持负索引 AssertionError: Negative indexing is not supported. 2.django向前端JavaScript传递列 ...
- luogu P3808 【模板】AC自动机(简单版)
题目背景 这是一道简单的AC自动机模板题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 管理员提示:本题数据内有重复的单词,且重复单词应该计算多次, ...