<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>canvas-小球抛物线</title>

</head>

<body>

	<canvas id="canvas" width="1024px" height="768px;" style="border: 1px solid #000;"></canvas>

<script>

var ball = {x:512 , y:100 , r:20 ,g:2 , vx :-4 ,vy:0 , color:"#005588"}

	window.onload = function(){

		var canvas = document.getElementById('canvas');

		canvas.width = 1024;

		canvas.height = 768;

		var cxt = canvas.getContext("2d");

		setInterval(function(){

			render(cxt);

			update()

		},50)

		function update(){

			ball.x += ball.vx;

			ball.y += ball.vy

			ball.vy =+ ball.g

			if(ball.y >= 768-ball.r){

				ball.y =768 -ball.r

				ball.vy = - ball.vy

			}

		}

		function render(cxt){

			cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)

			cxt.fillStyle = ball.color

			cxt.beginPath()

			cxt.arc(ball.x,ball.y , ball.r , 0,2*Math.PI)

			cxt.closePath()

			cxt.fill()

		}

	}

</script>

</body>

</html>

　　

H5 canvas-小球抛物线的更多相关文章

  1. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  3. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  5. H5 canvas 小demo之小球的随机运动

    1:结构之html----balls.html <!DOCTYPE html> <html> <head lang="en"> <meta ...

  6. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  7. canvas小球

      小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...

  8. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  9. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

  10. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

随机推荐

  1. 《CMake实践》笔记二：INSTALL/CMAKE_INSTALL_PREFIX【转】

    本文转载自:http://www.cnblogs.com/52php/p/5681751.html 四.更好一点的Hello World 没有最好,只有更好 从本小节开始,后面所有的构建我们都将采用  ...

  2. bzoj2461: [BeiJing2011]符环

    再做水题就没救了 考虑DP...我们把正反面一起弄 fi,j,k,u表示第几个位置,正面多了多少左括号,背面多了多少没办法消的右括号,背面结尾的左括号数 #include<cstdio> ...

  3. mysql查询表的字符集

    mysql查询表的字符集 SHOW CREATE TABLE user;

  4. Java-Runoob-高级教程-实例-字符串：07. Java 实例 - 字符串分割

    ylbtech-Java-Runoob-高级教程-实例-字符串:07. Java 实例 - 字符串分割 1.返回顶部 1. Java 实例 - 字符串分割  Java 实例 以下实例使用了 split ...

  5. 【179】IDL 读写 NetCDF 文件

    NetCDF(network Common Data Form)由位于科罗拉多州波尔市的 Unidata 程序中心开发,主要应用于大气科学的研究.NetCDF 的数据模式具有简单性和灵活性的特点.Ne ...

  6. HDU1244：Max Sum Plus Plus Plus

    题目链接:Max Sum Plus Plus Plus 题意:在n个数中取m段数使得这m段数之和最大,段与段之间不能重叠 分析:见代码 //dp[i][j]表示前i个数取了j段的最大值 //状态转移: ...

  7. bzoj 1858: [Scoi2010]序列操作【线段树】

    合并中间那块的时候没取max--WAWAWA 在线段树上维护一堆东西,分别是len区间长度,sm区间内1的个数,ll0区间从左开始最长连续0,ml0区间中间最长连续0,rl0区间从右开始最长连续0,l ...

  8. 使用Docker Compose编排微服务

    一般微服务架构会包含若干个微服务,而每个微服务可以有多个实例,如果每个微服务都有手动启停,那么效率就很低.维护量比较大. 所以我们可以使用Docker Compose来轻松.高效地管理容器. 一.安装 ...

  9. [ZPG TEST 118] 最大值【dp+离线】

    题4  最大值(findmax) [题目描述] 找到一个数组的最大值的一种方法是从数组开头从前到后对数组进行扫描,令max=a[0](数组下表从0..N-1),如果a[i]>max,就更新max ...

  10. 题解报告：hdu 4907 Task schedule

    Problem Description 有一台机器,并且给你这台机器的工作表,工作表上有n个任务,机器在ti时间执行第i个任务,1秒即可完成1个任务.有m个询问,每个询问有一个数字q,表示如果在q时间 ...