canvas小球

最新推荐文章于 2024-05-08 16:12:28 发布
最新推荐文章于 2024-05-08 16:12:28 发布
阅读量114 收藏
点赞数
原文链接：http://www.cnblogs.com/zzh965390267/p/8022871.html
版权
 

小球碰撞效果是采用面向对象的方式写的，在小球的构造器里包含了小球的属性值，大小，移动速度，半径大小以及颜色。

在小球的原型方法里，添加了小球运动的方法，当小球碰撞到屏幕边界的时候进行反弹。

小球是采用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>

 

转载于:https://www.cnblogs.com/zzh965390267/p/8022871.html

dnie9828
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas碰撞球
04-12
1、使用canvas实现小球碰撞； 2、全屏显示无滚动条； 3、设置定时器使小球动起来，页面流畅不卡顿； 4、html页面，浏览器直接运行
canvas画球
Moses
04-11 536
原文地址：https://www.w3cplus.com/canvas/create-3d-ball-with-canvas.html
Canvas弹球小游戏
weixin_43788587的博客
09-22 129
使用Canvas与原生javaScript创建的弹球小游戏通过键盘上下左右键控制小黑球移动，'吃掉'彩色弹球，彩色弹球相互碰撞交换颜色，按住Ctrl键可加速小黑球移动
canvas进度水球
想起来，就学习一下
04-02 489
首先，直接上图看看我们要实现的效果 canvas的性能优化 1、使用requestAnimationFrame制作动画 2、清除画布尽量使用 clearRect 一般情况下的性能：clearRect > fillRect > canvas.width = canvas.width; 3、尽量少调用 canvasAPI ，尽可能集中绘制 4、像素级别操作尽量避免浮点运算 5、使用 fo...
canvas 面向对象小球
weixin_43506403的博客
09-02 196
canvas
canvas炫彩小球
03-26
使用canvas实现的炫彩小球案例，有利于理解canvas使用
canvas小球碰撞.html
06-17
canvas小球碰撞 类似屏保小球
HTML5 canvas小球走迷宫游戏特效代码
03-20
在这个"HTML5 canvas小球走迷宫游戏特效代码"项目中，我们可以深入学习canvas的绘图原理以及如何利用canvas构建一个有趣的游戏。 首先，canvas的基本元素是画布，通过JavaScript操作这个画布，我们可以画出各种形状...
canvas小球连线碰撞效果源码.html
08-03
canvas小球连线碰撞效果源码，对应我的canvas小球连线碰撞这篇文章
HTML5 canvas小球走迷宫游戏.zip
05-14
在这个“HTML5 canvas小球走迷宫游戏”中，我们可以探索HTML5、Canvas以及前端开发的一些核心概念和技术。 1. HTML5 Canvas API： HTML5 Canvas是通过JavaScript来绘制2D图形的API，它提供了大量的方法，如`...
html5Canvas实现球内波浪动画
02-03
html5Canvas实现的球内波浪动画，包括每一步实现的源码，注释，方便修改使用
mysql 小球_JavaScript canvas实现跟随鼠标移动小球
weixin_42527401的博客
02-18 139
本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下canvas{border: 1px solid #000;}// 创建画布var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");// 球类function Ball(x, y) {this.x = x;this...
canvas-球体动画运动
莫兮的博客
03-18 360
canvas-球体动画运动 目录 文章目录前言原版代码实现效果展示`index.html``requestNextAnimationFrame.js``main.js`基于时间的运动效果`index.html``top.js``bottom.js`基于时间的对比结果展示`index.html``main.js` 前言 Polyfill多平台适用 边缘检测 球体运动 缺点： 如果每次都要重新绘图，图很复杂就会拖累性能 解决办法： clip()每次只重绘剪辑出来的区域 建立副屏canvas实现双缓冲
js面向对象练习（二）：JS面向对象的思路（canvas）写躁动的小球
weixin_34043301的博客
12-28 163
原文链接：http://www.jianshu.com/p/c921d70812a5 著作权归原作者所有：ToyLevom简书<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <!--<scripts...
教你如何用canvas绘制炫彩小球
weixin_50166066的博客
07-21 461
先弄一个画布 <canvas id="myCanvas" width="800" height="600"></canvas> 为了效果直观一点，我们设置了一点样式 canvas { border: 1px solid #000; background-color: #ccc; } 然后重点就在js方面了 // 得到画布 var canvas = document.getElementById("myCan
canvas画布内实现小球的随机移动
ariutaiaa
10-19 766
引用原文章：原文链接 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border:1px solid #daf; } </style> &lt...
鸿蒙--canvas实现球面运动动画
最新发布
yihanss的博客
05-08 1014
众所周知，我们在手机或者平板上看到的 3D 动画只是在二维的投影，我们只需要计算好运动物体的大小和位置的对应关系，就可以实现类似 3D 的效果。想要了解具体的算法以及映射关系，可以阅读原文。根据参考文章中的计算方式，我们只需要移植一下就行。这里是根据总结中的代码实现的 原文中的关键代码。
前端实战小案例--canvas之炫彩小球
朽木自雕的博客
10-04 686
前端实战小案例--canvas之炫彩小球 想练习更多前端案例，请进个人主页，点击前端实战案例->传送门 觉得不错的记得点个赞????支持一下我0.0！谢谢了！ 不积跬步无以至千里，不积小流无以成江海。 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8...
Canvas实例之鼠标移动特效(彩色小球)
qq_41096878的博客
02-21 1095
文章目录一、鼠标点击绽放彩色小球二、。。。 一、鼠标点击绽放彩色小球 图示： 思路 1、小球必要属性：圆心起始点xy，半径r，颜色color 2、小球的事件：运动—>运动方向dx dy，触发—>鼠标触发 3、canvas动画思想：清屏（清除画布）-更新（更新小球的运动）-渲染（创建小球） 总结：什么位置什么时候画什么形状的小球 源码与注释 <body> <canvas id="mycanvas" width="800" height="500"></ca
canvas 3d运动小球
09-09
通过在Canvas上绘制一个球体，并通过JavaScript控制球体的位置和运动轨迹，可以实现一个具有3D效果的小球运动动画。 实现这个效果的关键是使用Canvas绘图API来绘制球体的形状和颜色，并通过JavaScript代码实时控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值