第五讲：使用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 ...
随机推荐
- k8s集群之Docker安装镜像加速器配置与k8s容器网络
安装Docker 参考:https://www.cnblogs.com/rdchenxi/p/10381631.html 加速器配置 参考:https://www.cnblogs.com/rdchen ...
- 字符串 || CodeForces 591B Rebranding
给一字符串,每次操作把字符串中的两种字母交换,问最后交换完的字符串是多少 arr数组记录每个字母最后被替换成了哪个字母 读入字符前面加一空格 scanf(" %c %c", &am ...
- spring boot 自动生成mybatis代码
1)在pom.xml中增加generator插件 <!--自动生成mybaits--> <plugin> <groupId>org.mybatis.generato ...
- git命令（使用visual studio）
拉取,提取,合并 提交到本地 切换分支 创建分支 推送到远端 删除本地分支 删除远程分支
- OVOO
题目描述: $zhx$有一个棵$n$个点的树,每条边有个权值. 定义一个连通块为一个点集与使这些点连通的所有边(这些点必须连通). 定义一个连通块的权值为这个连通块的边权和(如果一个连通块只包含一个点 ...
- UVa-401-Palindromes（回文）
这一题的话我们可以把映像字符的内容给放入一个字符串常量里面,然后开辟一个二维的字符串常量数组,里面放置答案. 对于回文实际上是很好求的,对于镜像的话,我们写一个返回char的函数,让它接收一个char ...
- windows环境下Robot Framework的安装步骤
Robot Framework是由python编写的开源的用来做功能性测试的自动化测试框架.本文介绍Robot Framework在windows环境下的安装步骤. 安装python从python官网 ...
- docker 阿里云镜像加速器
传送门:阿里云镜像地址 Ubuntu/CentOS 安装/升级你的Docker客户端 推荐安装1..0以上版本的Docker客户端,参考文档 docker-ce 如何配置镜像加速器 针对Docker客 ...
- docker：安装
文章来源:http://www.cnblogs.com/hello-tl/p/8901132.html 0.卸载旧版本 # yum remove docker \ docker-client \ do ...
- Java：追加文件内容
文章来源:https://www.cnblogs.com/hello-tl/p/9139367.html import java.io.*; public class FileBasicOperati ...