绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花

一.知识点

1.动画：

setInterval(
function(){
draw(context);
update(canvas.width,canvas.height);
},
50
);

2.小球碰撞的状态：

ctx.globalCompositeOperation="xor";//lighter

二.代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>var balls = [];window.onload = function(){var canvas = document.getElementById("canvas");var  context=canvas.getContext('2d');canvas.width = 1200;canvas.height = 800;for(var i=0;i<100;i++){var R=Math.floor(Math.random()*255);//可对一个数进行下舍入。0.1就是0    0.9就是1var G=Math.floor(Math.random()*255);var B=Math.floor(Math.random()*255);var radius=Math.random()*50+20;aBall={color:"rgb("+R+","+G+","+B+")",radius:radius,x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),//pow() 方法可返回 x 的 y 次幂的值。vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))}balls[i]=aBall;}setInterval(function(){draw(context);update(canvas.width,canvas.height);},50);  } function draw(ctx){var canvas = ctx.canvas;ctx.clearRect(0,0,canvas.width,canvas.height);for( var i = 0 ; i < balls.length ; i ++ ){ctx.globalCompositeOperation="xor";//lighterctx.fillStyle=balls[i].color;ctx.beginPath();ctx.arc(balls[i].x,balls[i].y,balls[i].radius,0,2*Math.PI);ctx.closePath();ctx.fill();}}function update(canvasWidth, canvasHight){for( var i = 0 ; i < balls.length ; i ++ ){balls[i].x += balls[i].vx;balls[i].y += balls[i].vy;if( balls[i].x - balls[i].radius<=0 ){balls[i].vx = -balls[i].vx;balls[i].x = balls[i].radius;}if( balls[i].x + balls[i].radius>=canvasWidth ){balls[i].vx = -balls[i].vx;balls[i].x = canvasWidth-balls[i].radius;}if( balls[i].y - balls[i].radius<=0 ){balls[i].vy = -balls[i].vy;balls[i].y = balls[i].radius;}if( balls[i].y + balls[i].radius>=canvasHight ){balls[i].vy = -balls[i].vy;balls[i].y = canvasHight-balls[i].radius;}}}
</script>
</body>
</html>

绘制canvas彩色泡泡小球碰撞相关推荐

canvas(彩色泡泡碰撞)
globalCompositeOperation带来的不一样的烟花一.知识点 1.动画: setInterval( function(){ d ...
html5 canvas爆炸,html5 canvas彩色爆炸的小球动画特效
特效描述:html5 canvas 彩色爆炸小球动画特效.html5 canvas特效,有中心向四周爆炸的彩色小球,有开始和暂停按钮代码结构 1. HTML代码开始运动停止运动 var can ...
Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
01 C语言实现动态气泡碰撞和移动的效果，小球碰撞，Win7气泡壁纸，碰撞算法
C语言实现动态气泡碰撞和移动的效果作者将狼才鲸创建日期 2023-01-29 Git源码仓库地址:C语言实现动态气泡碰撞和移动的效果 CSDN文章地址:01 C语言实现动态气泡碰撞和移动的效果 ...
pygame动画演示小球碰撞
使用pygame实现动量定理的小球碰撞演示动画动量定理我们在高中的时候就已经接触过了,是十分重要的物理定理.其中的完全弹性碰撞(机械能守恒)是十分典型的例子,机械能守恒和动量定理两个公式就可以推出小 ...
相随与欢-彩色泡泡机的设计与实现
相随与欢长安大学信息工程学院人工智能系大一下-面向对象课程设计-彩色泡泡机题目详解与欢行一.题目与需求分析: 基于Qt框架的GUI设计与实现需求: 1.绘制泡泡(颜色.大小等配置信息随机 ...
javascript实现的下彩色泡泡及下雪（使用了某位大侠分享的继承机制）
最近心血来潮,想写段能产生下雪效果及下彩色泡泡效果的javascript小程序,且刚看了某位大侠写的一系列用不同方法在javascript里实现继承的文章,就想把里面的方法拿出来试下. 效果如下,点 ...
MFC基于单文档制作吹彩色泡泡程序
1.代码如下: // 吹彩色泡泡Doc.h : interface of the CMyDoc class // /#if !defined(AFX_DOC_H__559CF0A7_41F7_48A5 ...

绘制canvas彩色泡泡小球碰撞

绘制canvas彩色泡泡小球碰撞相关推荐

最新文章

热门文章