你的位置:首页 > 软件开发 > 网页设计 > 利用canvas打造一个炫酷的粒子背景

利用canvas打造一个炫酷的粒子背景

发布时间:2017-09-05 13:00:08
利用canvas打造一个炫酷的粒子背景,当然还有一些库都可以的,这次我们手写这个背景,主要的还是JS,canvas只是画布本身没有什么效果的,只是接口,还是需要JS去完成的。canvas标签说明:这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 A ...

利用canvas打造一个炫酷的粒子背景,当然还有一些库都可以的,这次我们手写这个背景,主要的还是JS,canvas只是画布本身没有什么效果的,只是接口,还是需要JS去完成的。
canvas标签说明:
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持canvas标记。
这是html5的一个新标签,换言之就是IE678直接GG,所以主要还是在现代浏览器上所使用,不过现在用IE678的人估计也很少。
那怎么做呢?
首先我们需要在页面中写入canvas标签(加点内联样式吧,比较懒 --)

<canvas id="canvas" style="position:absolute;width:100%;height:100%;background:#000;"></canvas>

接下来就是重点JS了,话不多说直接上代码

window.requestAnimFrame = (function () {  return window.requestAnimationFrame ||   window.webkitRequestAnimationFrame ||   window.mozRequestAnimationFrame ||   function (callback) {    window.setTimeout(callback, 1000 / 60);   }; })(); var can = document.getElementById("canvas"); var cxt = can.getContext("2d"); can.width = 1920; can.height = 950; cxt.lineWidth = 0.3; //初始链接线条显示位置 var mousePosition = {  x: 30 * can.width / 100,  y: 30 * can.height / 100 } //圆形粒子对象参数 var dots = {  n: 500,//圆形粒子个数  distance: 50,//圆形粒子之间的距离  d_radius: 100,//粒子距离鼠标点的距离  array: []//保存n个圆形粒子对象 } //创建随即颜色值 function colorValue(min) {  return Math.floor(Math.random() * 255 + min); } function createColorStyle(r, g, b) {  return "rgba(" + r + "," + g + "," + b + ", 1)"; } //混合两个圆形粒子的颜色 function mixConnect(c1, r1, c2, r2) {//圆的颜色 半径  return (c1 * r1 + c2 * r2) / (r1 + r2); }; //生成线条的颜色 function lineColor(dot1, dot2) {//获取具体的圆的颜色再计算  var color1 = dot1.color,   color2 = dot2.color;  var r = mixConnect(color1.r, dot1.radius, color2.r, dot2.radius);  var g = mixConnect(color1.g, dot1.radius, color2.g, dot2.radius);  var b = mixConnect(color1.b, dot1.radius, color2.b, dot2.radius);  return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b)); } //生成圆形粒子的颜色对象 function Color(min) {  min = min || 0;  this.r = colorValue(min);  this.g = colorValue(min);  this.b = colorValue(min);  this.style = createColorStyle(this.r, this.g, this.b); } //创建圆形粒子对象 function Dot() {  //圆形粒子随机圆心坐标点  this.x = Math.random() * can.width;  this.y = Math.random() * can.height;  //x y 方向运动的速度值  this.vx = -0.5 + Math.random();  this.vy = -0.5 + Math.random();  this.radius = Math.random() * 5;  //this.color = "#ff3333";  this.color = new Color(); } //绘制出圆形粒子 Dot.prototype.draw = function () {  cxt.beginPath();  cxt.fillStyle = this.color.style;  cxt.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  cxt.fill(); } //添加圆形粒子 function createCircle() {  for (var i = 0; i < dots.n; i++) {   dots.array.push(new Dot());  } } //绘制出圆形粒子 function drawDots() {  for (var i = 0; i < dots.n; i++) {   var dot = dots.array[i];   dot.draw();  } } //drawDots(); //移动 function moveDots() {  for (var i = 0; i < dots.n; i++) {   var dot = dots.array[i];   //当圆形粒子对象碰壁的时候就反弹回来   if (dot.y < 0 || dot.y > can.height) {    dot.vx = dot.vx;    dot.vy = -dot.vy;   } else if (dot.x < 0 || dot.x > can.width) {    dot.vx = -dot.vx;    dot.vy = dot.vy;   }   //给圆形粒子圆心坐标加上速度值移动圆形粒子   dot.x += dot.vx;   dot.y += dot.vy;  } } //链接粒子对象 function connectDots() {  for (var i = 0; i < dots.n; i++) {   for (var j = 0; j < dots.n; j++) {    iDot = dots.array[i];    jDot = dots.array[j];    if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance) {     if ((iDot.x - mousePosition.x) < dots.d_radius && (iDot.y - mousePosition.y) < dots.d_radius && (iDot.x - mousePosition.x) > -dots.d_radius && (iDot.y - mousePosition.y) > -dots.d_radius) {      cxt.beginPath();      //cxt.strokeStyle = "yellow";      cxt.strokeStyle = lineColor(iDot, jDot);      cxt.moveTo(iDot.x, iDot.y);      cxt.lineTo(jDot.x, jDot.y);      cxt.closePath();      cxt.stroke();     }    }   }  } } createCircle(); //让圆形粒子不断的移动 function animateDots() {  cxt.clearRect(0, 0, can.width, can.height);  moveDots();  connectDots()  drawDots();  requestAnimFrame(animateDots); } animateDots(); can.onmousemove = function (ev) {  var ev = ev || window.event;  mousePosition.x = ev.pageX;  mousePosition.y = ev.pageY; } can.onmouseout = function () {  mousePosition.x = can.width / 2;  mousePosition.y = can.height / 2; }

JS代码有点多,大家再用的时候封装好,直接引入JS文件就可以了

参考网上大神,具体来源不太记得,如有侵权,联系博主删除~

原标题:利用canvas打造一个炫酷的粒子背景

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录