<!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. luogu 3960 列队

    noip2017 D2T3 列队 某zz选手当时直接放弃了写了50还写错了 题目大意: 有一个n行m列的方阵,第i行j列的点编号为(i-1)m+j 每次把第x行y列的点拿出来,然后把这一行它之后的点都 ...

  2. [Codeforces 545E] Paths and Trees

    [题目链接] https://codeforces.com/contest/545/problem/E [算法] 首先求 u 到所有结点的最短路 记录每个节点最短路径上的最后一条边         答 ...

  3. Watir: 对浏览器的保存文件操作， 其实应用的是AutoIt脚本

    def save_file(filepath) ai =WIN32OLE.new("AutoItX3.Control") ai.WinWait("FileDownload ...

  4. linux上用mplayer播放264文件

    Linux上,264视频裸码流可用mplayer进行播放. 同时,可用-fps参数控制帧率. 参考:http://www.chinavideo.org/archiver/?tid-16088.html

  5. python 面向对象七 property() 函数和@property 装饰符

    一.property引入 为了使对象的属性不暴露给调用者和进行属性值检查,设置了访问属性的接口函数,使用函数访问属性,并可以在函数内部检查属性. >>> class Student( ...

  6. Golang 入门 : 理解并发与并行

    Golang 的语法和运行时直接内置了对并发的支持.Golang 里的并发指的是能让某个函数独立于其他函数运行的能力.当一个函数创建为 goroutine 时,Golang 会将其视为一个独立的工作单 ...

  7. Liferay门户部署至Apusic Application Server域

    Liferay默认情况下部署在Tomcat容器中,因项目原因需要将Liferay部署至金蝶Apusic Application Server应用服务器中,部署过程如下,特此记录. 1.liferay- ...

  8. 转-iOS 动画总结----UIView动画

    来自:http://blog.csdn.net/huifeidexin_1/article/details/7597868/ 1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过 ...

  9. fix for 12c profile

    .for CDBS run as sysDBa CREATE OR REPLACE FUNCTION verify_function (username varchar2, password varc ...

  10. 12c debug 转 12C 连接CDB和PDB

    来源:David Dai -- Focus on Oracle 连接到CDB 12c debug 和普通实例一样的连接. 指定ORACLE_SID 以后可以使用OS认证,也可以使用密码进行连接. [o ...