第五讲：使用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 ...
随机推荐
- nginx 的编译安装及基本操作
下载nginx [root@nginx ~]# wget http://nginx.org/download/nginx-1.14.0.tar.gz --2019-05-02 21:52:23-- h ...
- MySQL系列(三)--数据库结构优化
良好的数据库逻辑设计和物理设计是数据库高性能的基础,所以对于数据库结构优化是很有必要的 数据库结构优化目的: 1.减少数据的冗余 2.尽量避免在数据插入.删除和更新异常 例如:有一张设计不得当的学生选 ...
- 02.28 day03
print(1 or 3 > 2 and 4 < 5 or 6 and 2 < 7)## while True:# print(11)# print(22)# # break# # ...
- 理解 Word2Vec 之 Skip-Gram 模型
理解 Word2Vec 之 Skip-Gram 模型 天雨粟 模型师傅 / 果粉 https://zhuanlan.zhihu.com/p/27234078 508 人赞同了该文章 注明:我发现知乎有 ...
- Spring框架 (log4j :WARN No appenders could be found for logger log4j:WARN Please initialize the log4j system properly.)问题解决
Spring框架需要的jar包 1.Spring压缩包中的四个核心JAR包 beans .context.core 和expression 下载地址: https://pan.baidu.com/s/ ...
- linux 05
日期与时间命令:date.日历的命令:cal.计算器:bc 要使用quit退出 在命令行模式里执行命令时,会有两种主要情况: 一种是该命令会直接显示结果然后回到命令提示符等待下一个命令的输入 dat ...
- 在ubuntu16上搭建rabbitMQ环境
在ubuntu16上搭建rabbitMQ环境 安装rabbitMQ apt-cache pkgnames | grep rabbitmq apt-get install rabbitmq-server ...
- 算法导论 第九章 中位数和顺序统计量(python)
第i个顺序统计量:该集合中第i小的元素(建集合排序后第i位 当然算法可以不排序) 中位数:集合中的中点元素 下中位数 上中位数 9.1最大值和最小值 单独的max或min每个都要扫一遍 n-1次比较 ...
- 今年把js总结了一下，ppt格式的
本来想梳理成html,但是时间有限. 希望能够有所帮助. http://pan.baidu.com/s/1ntGAfED http://files.cnblogs.com/danghuijian/js ...
- HDU 5076 Memory
Memory Time Limit: 4000ms Memory Limit: 262144KB This problem will be judged on HDU. Original ID: 50 ...