第五讲：使用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 ...
随机推荐
- JS的本地保存localStorage、sessionStorage用法总结
localStorage 生命周期是永久的 这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage 生命周期为当前窗口或标签 ...
- AspNetCore容器化(Docker)部署(一) —— 入门
一.docker注册安装 Windows Docker Desktop https://www.docker.com/products/docker-desktop Linux Docker CE h ...
- JSP常用的几种跳转方式
一, 使用href超链接标记 (客户端跳转) 二, 提交表单 (客户端跳转) <form name="fo ...
- WebGL 绘制Line的bug(三)
之前铺垫了许多,今天可以来分享点纯干货了. 上一篇已经讲述了通过面模拟线条时候,每一个顶点的顶点数据包括:端点坐标.偏移量.前一个端点坐标.后一个端点坐标,当然如果我们通过索引的方式来绘制的话,还包括 ...
- Hadoop集群安装指南（CHD5.9.1）（分布式+图文详解）
centos7.1,CDH5.9.1,3台机器,终极指导安装 下载链接如下: 安装文件下载链接如下: 链接:https://pan.baidu.com/s/1RQYNiWn9a-T8GXcCsoDBs ...
- mysql踩坑
com.mysql.cj.core.exceptions.InvalidConnectionAttributeException: The server time zone value '****** ...
- MySQL数据库文件
MySQL数据库文件 本文档从MySQL数据库和存储引擎层面介绍各种类型的文件. 参数文件(my.cnf) 错误日志(error log) 二进制日志文件(binary log) 慢查询日志(slow ...
- hdu2795(Billboard)线段树
Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 年华利率n%
年化利率12%指的是,在您出借的本金不减少的情况下,您一年后的利息将达到您出借本金的12%.也就是说,如果年化利率是12%,则每月您出借资金获得的利息是1%(12% / 12个月). 在有利网,您的投 ...
- LeetCode（59）Length of Last Word
题目 Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return th ...