<!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. jdk 版本不一致导致的错误

    平时做项目时难免会从git,svn下载代码或者把别人的项目文件导入到自己的MyEclipse中进行操作,因此会遇到很多问题,常见的有一种是使用的jdk版本不一致造成的报错, 错误案例:     错误提 ...

  2. Mac mysql 运行sql文件中文乱码的问题

    别再傻傻的改什么mysql的编码格式了. 是.sql文件的编码有问题,把sql文件的编码格式改成utf-8就行了. mac怎么修改呢? vscode最爽了. 用vscode打开.sql文件,然后点右下 ...

  3. Linux内核--基于Netfilter的内核级包过滤防火墙实现

    测试内核版本:Linux Kernel 2.6.35----Linux Kernel 3.2.1 原创作品,转载请标明http://blog.csdn.net/yming0221/article/de ...

  4. POJ - 2418 Hardwood Species（map，trie，BST）

    1.输入若干行树名,输入结束后,按字典序输出树名及其所占百分比. 2.多种方法:map,trie,BST 3. map: #include<iostream> #include<st ...

  5. JVM从理论到实践

    这里实践不是指动手写JVM,而是动手做实验,结合日常工作相关的部分,理论与实践结合从而对这块知识有更深入的认识. 随着Java10的到来,JVM这块也有不少调整改进,网上大部分内容都是过时或大部分开发 ...

  6. 优化Laravel的分页LIMIT和OFFSET调用

    在分页系统中使用limit和offset是很常见的,它们通常也会和ORDER BY一起使用.索引对排序较有帮助,如果没有索引就需要大量的文件排序. 一个常见的问题是偏移量很大,比如查询使用了LIMIT ...

  7. UI：SQL语句

    sql语句一般不区分大小写,但是我们默认的是关键字要大写是一种好的习惯,比如SELECT 等效于 select.,但是表中的字段,属性区分大小写.Oracle 数据库是一种区分大小写的. Sql语句命 ...

  8. idea设置控制台不打印日志

    这样做的好处是当想打印数据到控制台查看就特别方便,这个在大数据spark sql使用的多.当然如果代码报错也会打印,这个不必担心. 方案Ⅰ 方法是将这个log日志文件放到idea的资源目录里即可 lo ...

  9. Vijos P1782 借教室 ( 前缀和&&差分序列）

    题目链接:借教室 题意:给出n天得教室数目,m个借教室得单子,按顺序借教室,问哪个单子不满足并输出 分析:可以用线段树做,会T,常数比较大,选择用差分序列维护前缀和,二分答案即可 #include&l ...

  10. bzoj 2438: [中山市选2011]杀人游戏【tarjan】

    没看太懂题意orz 最优的是tarjan缩点之后问入度为0的点,因为问这个点可以知道整个块的情况 答案是这ans个入度为0的点都不是杀手的概率\( \frac{n-ans}{n} \) 但是有特殊情况 ...