第五讲：使用html5中的canvas动态画出物理学上平抛运动
<html>
<head>
<title>平抛运动</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head> <body>
<canvas id="mc" width="900px" height="500px">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//定义一个小球
var balls = [];
balls.length = 0;
//先定义两个球
var ball_1 = {//平抛运动的球
x:70,
y:50,
r:15,
vx:600,//设置其水平方向的速度为600
vy:0
};
var ball_2 = {//自由落体运动的球
x:50,
y:50,
r:15,
vx:0,
vy:0
};
balls.push(ball_1);
balls.push(ball_2);
var cyc = 10;
var a = 10; //重力加速度
//绘制画布
cxt.fillStyle = "#030303";
cxt.fillRect(0,0,canvas.width,canvas.height);
var somethingAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.fillStyle = "rgba(0,0,0,.3)";
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.fillStyle = "#fff";
for(var i in balls){
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
balls[i].y += balls[i].vy * cyc / 1000;
balls[i].x += balls[i].vx * cyc / 1000;
//当球触碰地面
if (balls[i].r + balls[i].y >= canvas.height) {
if (balls[i].vy > 0) {
balls[i].vy *= -0.9;//在y轴方向的速度降低 相当于能量消失一部分仅仅保留0.7
}
}
else {
balls[i].vy += a;//加上两个球在 地面方向的加速度
}
//当球触碰左右两墙壁
if(balls[i].x >= canvas.width || balls[i].x < balls[i].r){
balls[i].vx *= -1;
}
}
$await(Jscex.Async.sleep(cyc));
}
}));
somethingAsync().start();
</script>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1bWluZ21fbXVzaWM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
第五讲：使用html5中的canvas动态画出物理学上平抛运动的更多相关文章
- HTML5中的canvas基本概念及绘图
* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 第七讲：HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- HTML5中的Canvas和SVG
Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...
- HTML5 中的 canvas 画布（二）
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- HTML5中的Canvas
1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...
随机推荐
- Navicat连不上MySQL的解决办法
USE mysql; ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '{your password}'; ...
- 【搜索】P1032 字串变换
题目描述 已知有两个字串A,B及一组字串变换的规则(至多6个规则): A1 ->B1 A2 -> B2 规则的含义为:在 A中的子串 A1 可以变换为B1,A2 可以变换为 ...
- url跳转路径参数获取
function getUrlParam1(name){ //正则表达式过滤 var reg = new RegExp("(^|&)" + name + "=([ ...
- 【2018 CCPC网络赛】1009 - 树
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=6446 题目给出的数据为一棵树,dfs扫描每条边,假设去掉某条边,则左边 x 个点,右边 n-x 个点, ...
- FastNet C++/Python 网络通信库之 协议
协议可以使用的基础数据类型: UInt8,UInt16,UInt32,UInt64Int8,Int16,Int32,Int64Float,Double,Bool,String [T] 数组,T代表元 ...
- 自制操作系统小样例——参考部分linux0.11内核源码
详细代码戳这里. 一.启动引导 采用软件grub2进行引导,基于规范multiboot2进行启动引导加载.multiboot2的文档资料戳这里. 二.具体内容 开发环境 系统环境:Ubuntu 14. ...
- JSP行为
JSP行为标签使用XML语法结构来控制servlet引擎.它能够动态插入一个文件,重用JavaBean组件,引导用户去另一个页面,为Java插件产生相关的HTML等等.行为标签只有一种语法格式,它严格 ...
- SQL Server 上关于同一张表里的三级联动
或许这并不能叫做三级联动,三级联动是很容易实现的东西,有明确的层级关系,一般分开三张表存储.我在公司的项目里遇到这样一个问题,同一张表里面,有分公司,客户,项目3种关系,他们的层级关系是这样:分公司- ...
- notepad++编辑器写python需注意使用utf-8编码
语言:python3.4 文本编辑器:notepad++ 报错:SyntaxError: (unicode error) 'utf-8' codec can't decode byte 0xb4 in ...
- zoj 2772 Quick Change
Quick Change Time Limit: 2 Seconds Memory Limit: 65536 KB J.P. Flathead's Grocery Store hires c ...