canvas粒子模型-动态背景资源-CSDN文库

共1个文件

html：1个

需积分: 12 98 浏览量 2016-04-07 11:45:56 上传评论 1 收藏 2KB RAR 举报

在网页设计中，动态背景是一种吸引用户注意力并增强用户体验的有效方式。"canvas粒子模型-动态背景"就是一个利用HTML5的canvas元素创建出的粒子效果，为网页提供了一种极具视觉吸引力的互动背景。Canvas是HTML5的一个核心特性，它允许在浏览器中进行2D图形的绘制，无需依赖Flash或其他插件。 1. **Canvas基本概念** - Canvas是HTML5中的一个画布标签，通过JavaScript来控制在画布上进行图像绘制。 - 它提供了丰富的API，如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等，用于绘制矩形、线条、曲线等各种形状。 2. **粒子系统** - 粒子系统是一种模拟复杂图形效果的方法，通过大量简单的个体（粒子）组合，形成复杂的视觉效果，如烟雾、火焰、星光等。 - 在canvas中实现粒子效果，通常需要定义每个粒子的状态（如位置、速度、颜色、大小等），并用定时器更新和绘制它们。 3. **动态背景实现步骤** - 创建canvas元素：在HTML中添加`<canvas>`标签，并通过JavaScript获取其引用。 - 初始化画布：设置canvas的宽高，以及绘图环境（Context）。 - 定义粒子类：包含粒子的基本属性（如位置、速度、颜色、生命周期等）以及粒子的行为（如何移动、变化等）。 - 创建粒子数组：根据需要生成一定数量的粒子对象。 - 绘制粒子：在每一帧，遍历粒子数组，更新粒子状态并将其绘制到canvas上。 - 使用requestAnimationFrame()：确保动画平滑进行，它会在浏览器下一次重绘前调用指定的函数。 4. **性能优化** - 使用`requestAnimationFrame()`而非setTimeout或setInterval，因为前者与浏览器的刷新同步，更节省资源。 - 对粒子进行批处理操作，一次性绘制多个粒子，减少重绘次数。 - 如果粒子数量过大，可以考虑使用Web Workers进行后台计算，避免阻塞主线程。 5. **bbb.html文件** - 这个文件很可能是实现上述粒子效果的HTML文件，包含了HTML结构、CSS样式以及JavaScript代码。 - 文件中可能包含了一个或多个canvas元素，以及用于生成和管理粒子的JavaScript代码段。 "canvas粒子模型-动态背景"是一种使用HTML5 canvas技术实现的动态视觉效果，通过粒子系统原理，创建出具有艺术感和动感的网页背景。开发者可以通过学习和理解这些知识点，提升网页交互设计的能力，为用户提供更加生动和沉浸式的浏览体验。

资源推荐

资源详情

资源评论

收起资源包目录

canvas粒子模型-动态背景.rar （1个子文件）

bbb.html 7KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>粒子模型动态背景</title> <style> *{margin: 0;padding:0;} html,body{height:100%;width:100%;} canvas{display: block;} #myCanvas{background:#001022;} #myButtons{bottom:20px;left:20px;position:absolute;} #myButtons button{padding:15px;} </style> </head> <body > <canvas id="myCanvas" width="500" height="500"></canvas> <div id="myButtons"> <button id="refreshBtn">刷新</button> <button id="acceleBtn">加速</button> <button id="startAnimation">Start</button> <button id="stopAnimation">Stop</button> </div> </body> </html> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { /*控制模块*/ $("#refreshBtn").click(function(event) {myGetAsteroid()}); $("#acceleBtn").click(function(event) {animate()}); var playAnimation = true; var startButton = $('#startAnimation'); var stopButton = $('#stopAnimation'); startButton.hide(); startButton.click(function() { $(this).hide(); stopButton.show(); playAnimation=true; animate(); }); stopButton.click(function(){ $(this).hide(); startButton.show(); playAnimation=false; }); var canvas=$('#myCanvas'); var context=canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight= canvas.height(); /*更新画布大小*/ $(window).resize(resizeCanvas); function resizeCanvas(){ canvas.attr("width",$(window).get(0).innerWidth); canvas.attr("height",$(window).get(0).innerHeight); canvasWidth=canvas.width(); canvasHeight=canvas.height(); } resizeCanvas(); /*物体属性*/ var Asteroid = function(x,y,radius,iscolor,vx,vy,ax,ay){ this.x=x; this.y=y; this.radius=radius;//大小 this.iscolor=iscolor;//颜色 this.vx=vx;//x轴速度 this.vy=vy;//y轴速度 this.ax=ax;//x轴加速度 this.ay=ay;//y轴加速度 } /*创建物体实体*/ var asteroids = new Array(); var getAsteroid = function() { for (var i = 0; i < 100; i++) { var x=20+(Math.random()*(canvasWidth-40)); var y=20+(Math.random()*(canvasHeight-40)); var radius=2+Math.random()*10; var iscolor='rgba('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+',0.54)'; var vx=Math.random()*4-2; var vy=Math.random()*4-2; var ax=Math.random()*0.2-0.1; var ay=Math.random()*0.2-0.1; asteroids.push(new Asteroid(x,y,radius,iscolor,vx,vy,ax,ay)); }; } getAsteroid(); /*重构物体实体*/ var myGetAsteroid = function () { for (var i = 0; i < asteroids.length; i++) { asteroids[i].x=20+(Math.random()*(canvasWidth-40)); asteroids[i].y=20+(Math.random()*(canvasHeight-40)); asteroids[i].radius=2+Math.random()*10; asteroids[i].iscolor='rgba('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+',0.54)'; asteroids[i].vx=Math.random()*4-2; asteroids[i].vy=Math.random()*4-2; asteroids[i].ax=Math.random()*0.2-0.1; asteroids[i].ay=Math.random()*0.2-0.1; } } function animate(){ context.clearRect(0,0,canvasWidth,canvasHeight); context.fillStyle = "rgb(255,255,255)"; var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; /*设置边界，防止物体运行到画布之外*/ if(tmpAsteroid.x - tmpAsteroid.radius < 0){ tmpAsteroid.x = tmpAsteroid.radius; tmpAsteroid.vx *=-1; tmpAsteroid.ax *=-1; }else if(tmpAsteroid.x + tmpAsteroid.radius > canvasWidth){ tmpAsteroid.x = canvasWidth - tmpAsteroid.radius; tmpAsteroid.vx *=-1; tmpAsteroid.ax *=-1; } if(tmpAsteroid.y - tmpAsteroid.radius < 0){ tmpAsteroid.y = tmpAsteroid.radius; tmpAsteroid.vy *=-1; tmpAsteroid.ay *=-1; }else if(tmpAsteroid.y + tmpAsteroid.radius > canvasHeight){ tmpAsteroid.y = canvasHeight - tmpAsteroid.radius; tmpAsteroid.vy *=-1; tmpAsteroid.ay *=-1; } /*限制物体最大移动速度*/ if(Math.abs(tmpAsteroid.vx)<10){ tmpAsteroid.vx+=tmpAsteroid.ax } if(Math.abs(tmpAsteroid.vy)<10){ tmpAsteroid.vy+=tmpAsteroid.ay } /*摩擦力*/ if(Math.abs(tmpAsteroid.vx)>0.1){ tmpAsteroid.vx*=0.9; }else{ tmpAsteroid.vx*=0.1; } if(Math.abs(tmpAsteroid.vy)>0.1){ tmpAsteroid.vy*=0.9; }else{ tmpAsteroid.vy*=0.1; } // 更新物体之间连线 context.beginPath(); for (var j = asteroidsLength-1; j > 0; j--) { var p2 = asteroids[j]; var a = tmpAsteroid.x - p2.x var b = tmpAsteroid.y - p2.y var dist = Math.sqrt((a * a) + (b * b)).toFixed(2); if (dist < 100) { context.moveTo(tmpAsteroid.x + tmpAsteroid.vx, tmpAsteroid.y + tmpAsteroid.vy); context.lineTo(p2.x + p2.vx, p2.y + p2.vy); } } context.stroke(); context.strokeStyle = 'rgba(204,204,204,0.5)'; context.closePath(); var tx = tmpAsteroid.x+=tmpAsteroid.vx; var ty = tmpAsteroid.y+=tmpAsteroid.vy; var tr = tmpAsteroid.radius; /*更新画布物体*/ context.beginPath(); context.fillStyle = tmpAsteroid.iscolor; context.arc(tx,ty,tr,0,Math.PI*2,false); context.closePath(); context.fill(); } if(playAnimation){ requestAnimationFrame(animate); } } animate(); }); </script>

评论收藏

内容反馈