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 ...
随机推荐
- 【视频编解码·学习笔记】8. 熵编码算法：基本算法列举 & 指数哥伦布编码
一.H.264中的熵编码基本方法: 熵编码具有消除数据之间统计冗余的功能,在编码端作为最后一道工序,将语法元素写入输出码流 熵解码作为解码过程的第一步,将码流解析出语法元素供后续步骤重建图像使用 在H ...
- 妙用ES6解构和扩展运算符让你的代码更优雅
http://www.cnblogs.com/chrischjh/p/4848934.html
- Angularjs的真分页，服务端分页，后台分页的解决方案
背景:项目的框架使用的是Angularjs,在做数据展示的时候,使用的是ng-table.用过ng-table的人都知道,他是自带分页的,默认分页方式是假分页.也就是一口气把所有的数据从数据库里取出来 ...
- 如何进行系统配置 ——了解DOS下的内存
DOS操作系统最早设计时,PC机的硬件系统只支持1M字节的寻址空间,所以DOS只能管理最多1M字节的连续内存空间.在这1M内存中,又只有640K被留给应用程序使用,它们被称为常规内存或基本内存,其它3 ...
- Fresco-FaceBook推出的Android图片加载库
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
- Linux 系统裁剪笔记 软盘2
第一步:裁减内核打开终端,输入:cd /usr/src/linux2.4,然后输入make xconfig.现在编译内核正式开始了1.1 "code maturity level optio ...
- 芝麻HTTP：Ansible扩展
Ansible简介 Ansible是由Python开发的一个运维工具,因为工作需要接触到Ansible,经常会集成一些东西到Ansible,所以对Ansible的了解越来越多. 那Ansible到底是 ...
- hdu5925 Coconuts
比完看acdream说这题是签到题 怎么都不会写 我现在补完也觉得 这不是傻逼题么 我我这个这么快5题的人真的不应该啊 #include<bits/stdc++.h> using name ...
- Carries SCU - 4437
Carries frog has nn integers a1,a2,-,ana1,a2,-,an, and she wants to add them pairwise. Unfortunately ...
- Educational Codeforces Round 37
Educational Codeforces Round 37 这场有点炸,题目比较水,但只做了3题QAQ.还是实力不够啊! 写下题解算了--(写的比较粗糙,细节或者bug可以私聊2333) A. W ...