canvas小球
|
小球碰撞效果是采用面向对象的方式写的，在小球的构造器里包含了小球的属性值，大小，移动速度，半径大小以及颜色。 在小球的原型方法里，添加了小球运动的方法，当小球碰撞到屏幕边界的时候进行反弹。 小球是采用h5的canvas绘制，采用了性能更高的requestanimationframe作为计时器，该计时器是以屏幕的刷新率作基准，CPU占用较少，性能比settimeout以及setinterval性能更高， |
|
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Ball</title> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| canvas { | |
| background: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id='canv'>您的浏览器不支持CANVAS，请更换浏览器!!!</canvas> | |
| <script> | |
| document.addEventListener('resize', resize) | |
| function resize() {//监听屏幕缩放 | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| } | |
| var canvs = document.getElementById('canv'); | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| var ctx = canvs.getContext('2d');//获得canvas绘图环境 | |
| var ball = function () {//小球构造器 | |
| this.bx = Math.random() * canvs.width;//小球x轴的位置 | |
| this.by = Math.random() * canvs.height;//小球y轴的位置 | |
| this.r = Math.random() * 20 + 10;//小球的半径 | |
| this.color = 'rgba('+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.random()/4+')'//小球的颜色 | |
| this.vx = Math.random() *10-5;//小球的x轴方向的运动速度 | |
| this.vy = Math.random() *4-2;//小球y轴方向的速度 | |
| } | |
| ball.prototype.draw = function () {//小球绘制方法 | |
| // ctx.fillStyle = 'rgba(255,255,255,0.1)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| ctx.beginPath();//开始路径 | |
| var grd=ctx.createRadialGradient(this.bx,this.by,0,this.bx,this.by,this.r);//生成小球径向渐变色 | |
| grd.addColorStop(0,"white");//里面的颜色 | |
| grd.addColorStop(1,this.color);//外界的颜色 | |
| ctx.globeAlpha=0.2;//透明度 | |
| // Fill with gradient | |
| ctx.fillStyle=grd;//以渐变色填充小球 | |
| ctx.arc(this.bx, this.by, this.r, 0, Math.PI * 2, true);//画圆函数 | |
| ctx.fill() | |
| } | |
| ball.prototype.move = function () {//小球的移动方法 | |
| this.bx += this.vx; | |
| this.by += this.vy; | |
| // ball.vy *= 0.99; | |
| // ball.vy += 0.25; | |
| if (this.by + this.vy > canvs.height || this.by + this.vy < 0) { | |
| this.vy = -this.vy;//边界判定，到边界后反向弹 | |
| // | |
| } | |
| if (this.bx + this.vx > canvs.width || this.bx + this.vx < 0) { | |
| this.vx = -this.vx; | |
| // nball.color = '#' + ('00000' + ((Math.random() * 16777215))) | |
| } | |
| } | |
| function gogo(num) { | |
| num= num||10; | |
| var globe = []; | |
| for (var i = 0; i < num; i++) { | |
| var nball = new ball(); | |
| globe.push(nball) | |
| // nball.draw() | |
| } | |
| console.log(globe) | |
| function ballmove(){ | |
| // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| for (var j = globe.length - 1; j >= 0; j--) { | |
| // globe[j].draw() | |
| globe[j].move(); | |
| globe[j].draw() | |
| } | |
| window.requestAnimationFrame(ballmove) | |
| } | |
| ballmove() | |
| } | |
| gogo(100) | |
| // function drawcrc() { | |
| // // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| // var nball = new ball(); | |
| // nball.draw(); | |
| // window.requestAnimationFrame(drawcrc) | |
| // } | |
| // drawcrc(); | |
| </script> | |
| </body> | |
| </html> |
canvas小球的更多相关文章
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- canvas小球动画原理
随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...
- 再探canvas(小球实例)
之前学习过canvas的一些使用,也用过canvas绘制过时钟, 但是很久不用,有些遗忘了,这里做一个简单的回顾. 在web页面创建一个canvas画布非常简单,如下即可: <canvas id ...
- canvas小球动画
绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...
- canvas小球 时间倒计时demo-优化
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- canvas小球 时间demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- canvas动画气球
canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
随机推荐
- 云计算基础 （redhat7介绍及相关配置）
redhat7简介 新版本的rhel7不再对32位架构的支持 引导程序: GRUB2,比之前的GRUB更强大,GRUB2支持bios,efi和openfiremware GRUB2支持mbr分区表和g ...
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）
好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...
- Ffmpeg简介
http://www.ffmpeg.com.cn/index.php/%E9%A6%96%E9%A1%B5 FFmpeg is a complete solution to record, conve ...
- 蜻蜓FM 涉嫌诈骗投资人和广告主源代码剖析
本文主要内容,引用自知乎的这篇文章:如何评价蜻蜓 FM 伪造用户活跃度等数据 感谢"左莫"."任正"等热心正义的网友--左莫,任正的最早的回答猜测已经被蜻蜓FM ...
- Android Parcelable和Serializable的区别
本文主要介绍Parcelable和Serializable的作用.效率.区别及选择,关于Serializable的介绍见Java 序列化的高级认识. 1.作用 Serializable的作用是为了保存 ...
- 使用EFI引导从硬盘(U盘)安装Win7的图文教程
目前仅支持vista后的64位系统 大部分使用EFI引导安装Win7的教程都是采用光盘启动安装,虽然光盘安装比较简单,但是对于没有光驱的朋友来说还是相当不便,更不用说光盘安装的两大缺点了,一速度慢,二 ...
- freemarker字符串拼接
freemarker字符串拼接 1.字符串拼接的几种类型 (1)字符串和字符串 (2)字符串和数字 (3)字符串和字符串变量 (4)字符串变量和字符串变量 2.演示示例 <#--定义字符串--& ...
- web开发性能优化---数据库篇
1. 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2.锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷) 3.返回了不必要的行和列 用OR的字句可以分解成 ...
- 双刃剑MongoDB的学习和避坑
双刃剑MongoDB的学习和避坑 MongoDB 是一把双刃剑,它对数据结构的要求并不高.数据通过key-value的形式存储,而value的值可以是字符串,也可以是文档.所以我们在使用的过程中非常方 ...
- JustMock .NET单元测试利器（二）JustMock基础
JustMock API基础 Mock是Telerik®JustMock框架中的主要类.Mock用于创建实例和静态模拟,安排和验证行为. 本文将介绍 "Mock"的基本用法: 首先 ...