canvas 简单的小球抛物线实现和简单的应用
2017-07-03 19:24
176 查看
使用canvas实现简单的小球下落
canvas可以实现一些有趣的绘画,可以实现规则或者不规则的图形。我们这里的小球就是一个通过canvas的方法arc画出的圆。我们可以使用storke和fil来实现圆的颜色和边框,如果你还想让圆在漂亮一些,使用createRadialGradient可以实现球颜色的渐变。var grad = context.createRadialGradient(x,y,5,x,y,20); //颜色 grad.addColorStop(0,'rgb(231, 74, 148)'); grad.addColorStop(0.5,'rgb(99, 75, 231)'); grad.addColorStop(1,'rgb(78, 228, 156)'); if(jiaflag!=1){ Curve(cxt,x,y); } cxt.beginPath(); cxt.arc(x,y,ball.r,0,2*Math.PI); cxt.strokeStyle="#000000"; cxt.fillStyle=grad;
样子大概就是这样,createRadialGradient的各个参数的意思是
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
动画
小球画好了,怎么样才能让小球动起来呢?其实很简单,所谓的动画其实质就是一帧一帧的静态元素组合起来,让人眼感觉像是动的一样。所以让小球动起来,你需要在页面让不停的画小球,而且你画的小球的位置要符合运动的规律,这样你的小球就动了起来。首先,我们创建一个对象来存放小球的信息,圆心坐标、半径、角度等等。
var ball = {//初始化小球 x: 105, y: 500, r:20, g:2, vx:-4, vy:-40 }
小球已经存在了我们只需要通过小球的属性画出来就行了。这里我们使用一个方法实现,方便以后使用。
function drawball(cxt,x,y){//画小球 cxt.clearRect(0,0,context.canvas.width,context.canvas.height); var grad = context.createRadialGradient(x,y,5,x,y,20); //颜色 grad.addColorStop(0,'rgb(231, 74, 148)'); grad.addColorStop(0.5,'rgb(99, 75, 231)'); grad.addColorStop(1,'rgb(78, 228, 156)'); cxt.beginPath(); cxt.arc(x,y,ball.r,0,2*Math.PI); cxt.strokeStyle="#000000"; cxt.fillStyle=grad; cxt.stroke(); cxt.fill(); cxt.closePath(); }
这样我们就通过函数的方法画出了小球,到时候我们只需要通过不停的调用这个方法就可以画出运动的球了。当然,每次我们只需要出现一个小球,所以需要用clearRect来清除画布。
小球运动的轨迹,我们就用一个平抛来实现。
平抛运动大家都很熟悉,你需要知道的是水平初速度和垂直初速度还有加速度。这里我们只是简单的例子,所以并不会完全按照实际生活中的重力加速度来计算。
function update(){//通过简单的运动原理更新小球位置 ball.x = ball.x + ball.vx; ball.y = ball.y + ball.vy; ball.vy = ball.vy + ball.g; if( ball.y > (600 - ball.r)){//下边框碰撞检测 ball.y = 600 - ball.r; ball.vy = -ball.vy*0.5; } if( ball.x < (ball.r)){//左边框碰撞检测 ball.vx = -ball.vx; } if( ball.y < (ball.r)){//上边框碰撞检测 ball.y = ball.r; ball.vy = -ball.vy*0.5; } }
这里我只写了上、左、下的边框,右边的没写,所以小球是可以从右边滚出画布的。我们可以通过修改的vx、vy来决定是上抛和下抛、左抛和右抛。
小球的运动轨迹
大家可能玩过愤怒的小鸟,在小鸟发射的时候会有一条小鸟经过的轨迹,那么这些轨迹有事如何实现的呢?原理和我们小球运动是一样的。不一样的是我们需要清除画布确保只有一个小球,而轨迹则需要保留。那么既然每次都会清除画布重绘,怎么样才能保留运动轨迹的小球的?也很简单我们只需要定义一个数组来存放每次的运动位置,在小球重绘的时候,使用for循环把轨迹重绘就行了。主要的原理就这些,我这里在画布上还加了一个椭圆 权当做一个篮框,当小球坐标在椭圆内的时候就相当于进了一个球。
浏览器兼容
demo地址(厚颜无耻的我想要个星星)相关文章推荐
- canvas标签应用 简单俄罗斯方块游戏的实现
- J2ME应用实例——一个简单的计算器实现(附源代码)
- 在tomcat下实现简单的SSL应用
- JavaScript实际应用:简单二级联动菜单实现
- 【小试身手】几个自定义控件的组合应用,实现简单的“增删改查”功能(有源码)
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品,删除购物商品并且显示购物车信息。
- Dhtml+Js算法:5个小球运动的简化版,变通实现更简单的飞行的图片
- vlc的应用之六:简单的视频点播系统(B/S)的实现
- 综合应用WPF/WCF/WF/LINQ之四十:实现一个简单的DataGrid之CheckBox已勾选的项的保存
- 综合应用WPF/WCF/WF/LINQ之三十九:实现一个简单的DataGrid之获取某格的原始(或当前)行(或列)的Index
- ajax 文件上传应用简单实现
- JavaScript实际应用:简单二级联动菜单实现
- JSP应用导出Excel报表的简单实现以及中文乱码彻底解决(HTML)(转)
- AJAX实现一个简单的相册和里头包含一些DOM基础应用
- GoogMap的简单实现(GoogleMapApI简单应用)
- Web应用导出Excel报表的简单实现(HTML)
- 对Jbpm数据库应用的简单分析和在Mysql上实现的demo
- JavaScript实际应用:简单二级联动菜单实现
- 利用operator实现隐式类型转换的简单应用
- [零基础学JAVA]Java SE应用部分-31.Java IO操作(05)IO操作实例讲解之实现简单MIS 推荐