<!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. mysql04--存储过程

    过程:若干语句,调用时执行封装的体.没有返回值的函数. 函数:是一个有返回值的过程 存储过程:把若干条sql封装起来,起个名字(过程),并存储在数据库中. 也有不存储的过程,匿名过程,用完就扔(mys ...

  2. eclipse svn修改用户名密码

    1,svn客户端删除 2,eclipse 补充,上图为网友资料,但实际操作过程中,发现eclipse中svn为svnkit,但相应目录下无.keyring文件,最后按步骤2删除auth下所有文件,再次 ...

  3. AutoIT: ControlSetText

    1. ControlSetText :可以摆脱Send的限制,在适当的文本框位置输入用户想要输入的信息.2. ControlGetText可以获取文本 Run("notepad.exe&qu ...

  4. UI：sqlite数据库

    使用sqllite的时候一些笔记 数据库(管理类),在工程 general 导入 动态链接库 libsqllite3.0.dylib  在.h文件里引入导入 sqllite3.h 头文件 在.h里面声 ...

  5. UNIX 环境模拟工具Cygwin安装及使用图文教程

    对于 UNIX 本身,也有各种称呼.IBM® 大型机用户说各种带字母 "z" 的行话,比如 IBM z/OS® 和 System z9 Virtual Machine (z/VM) ...

  6. mongoDB学习资料整理

    mongoDB入门篇 http://www.imooc.com/view/246

  7. zoj 2587 Unique Attack【最小割】

    拆点拆魔怔了 直接按照原图建就行,这里有个小技巧就是双向边的话不用按着板子建(u,v,c)(v,u,0)(v,u,c)(u,v,0),直接建(u,v,c)(v,u,c)会快十倍!800ms->8 ...

  8. [App Store Connect帮助]九、衡量 App 表现（1）分析和报告概述

    App Store Connect 提供如下分析和报告,以衡量您 App 的表现并查看向您支付的最终付款. App 分析 通过 App Store 展示次数.产品页面查看次数.销售额.App 使用次数 ...

  9. 'ALTER TABLE SWITCH' 语句失败。表'MGXXX.dbo.user_XXX' 已分区，但 索引'ix_user_XXX_user_id' 未分区。

    问题描述: 今天在做分区切换的时候把旧log数据切到clear表,遇到了这个问题,顺便做下笔记记录一下解决方法 'ALTER TABLE SWITCH' 语句失败.表'MGXXX.dbo.user_X ...

  10. 关于python安装lxml插件的问题

    文章只是介绍自己安装时从安装不上到安装后报错,再到安装成功的心路历程,并不代表广大欧皇也会会出现同类型的问题,也不是总结和汇总各种出问题的原因. 直接进入正题,首先我这边是win环境,电脑上装的是py ...