<!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. mysql07---主从复制

    mysql主从复制,replication,(可以一主多从,不可一从多主) 原理: 主从分离,最少2台服务器.主服务器里面的数据,要在从服务器里面都有一份. 把主服务器的所有insert,update ...

  2. 网络驱动移植之net_device结构体及其相关的操作函数

    内核源码:Linux-2.6.38.8.tar.bz2 在Linux系统中,网络设备都被抽象为struct net_device结构体.它是网络设备硬件与上层协议之间联系的接口,了解它对编写网络驱动程 ...

  3. linux永久或临时修改dns

    1.临时修改网卡DNS地址 sudo vim /etc/resolv.conf 改为如下内容: nameserver 8.8.8.8 #修改成你的主DNS nameserver 8.8.4.4 #修改 ...

  4. aliyun 日志服务(Log Service,Log)是针对日志场景的一站式服务

    日志服务(Log Service,Log)是针对日志场景的一站式服务,在阿里巴巴集团内部被广泛使用.用户无需开发就能快捷完成日志生命周期中采集.消费.投递以及查询功能. 日志服务当前提供如下功能 日志 ...

  5. mongodb 关闭服务 mongod -f /root/mongodb/bin/xx.conf --shutdown

    /root/mongodb/bin/mongod -f /root/mongodb/bin/xx.conf --shutdown

  6. sizeof注意

    1.sizeof用于获取非托管类型的大小(以字节为单位). 非托管类型包括下表列出的内置类型以及以下类型: 枚举类型 指针类型 用户定义的结构,不包含任何属于引用类型的字段或属性     struct ...

  7. C++实现二叉树(建树,前序,中序,后序)递归和非递归实现

    #include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...

  8. Android中string.xml中的的标签xliff:g(转载)

    转自:http://blog.csdn.net/xuewater/article/details/25687987 在资源文件中写字符串时,如果这个字符串时动态的,又不确定的值在里面,我们就可以用xl ...

  9. [App Store Connect帮助]七、在 App Store 上发行(3.1)提交至“App 审核”:提交 App 以供审核

    将您的 App 提交至“App 审核”,从而开始审核流程,以便使您的 App 在 App Store 上可用. 但是,在您能够上传 App 至“App 审核”前,您必须提供所有必填的元数据并为该版本选 ...

  10. JavaScript 数组相关基础方法

    文章来源于:https://www.cnblogs.com/dolphinX/p/3353590.html 创建数组 构造函数 1.无参构造函数,创建一空数组 var a1=new Array(); ...