炫酷的粒子背景 html例項

阿新 • • 發佈：2019-02-10

/** * Created by Administrator on 2016/6/29. */ var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d') canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.lineWidth = .3; ctx.strokeStyle = (new Color(150)).style; var

mousePosition = { x: 30 * canvas.width / 100, y: 30 * canvas.height / 100 }; var dots = { nb: 750, distance: 50, d_radius: 100, array: [] }; function colorValue(min) { return Math.floor(Math.random() * 255 + min); } function createColorStyle

(r,g,b) { return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; } function mixComponents(comp1, weight1, comp2, weight2) { return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); } function averageColorStyles(dot1, dot2) { var color1 = dot1.color, color2 = dot2.color; var

r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius), g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius), b = mixComponents(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() * canvas.width; this.y = Math.random() * canvas.height; this.vx = -.5 + Math.random(); this.vy = -.5 + Math.random(); this.radius = Math.random() * 2; this.color = new Color(); } Dot.prototype = { draw: function(){ ctx.beginPath(); ctx.fillStyle = this.color.style; ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); } }; function createDots(){ for(i = 0; i < dots.nb; i++){ dots.array.push(new Dot()); } } function moveDots() { for(i = 0; i < dots.nb; i++){ var dot = dots.array[i]; if(dot.y < 0 || dot.y > canvas.height){ dot.vx = dot.vx; dot.vy = - dot.vy; } else if(dot.x < 0 || dot.x > canvas.width){ dot.vx = - dot.vx; dot.vy = dot.vy; } dot.x += dot.vx; dot.y += dot.vy; } } function connectDots(){ for(i = 0; i < dots.nb; i++){ for(j = i; j < dots.nb; j++){ i_dot = dots.array[i]; j_dot = dots.array[j]; if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){ if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){ ctx.beginPath(); ctx.strokeStyle = averageColorStyles(i_dot, j_dot); ctx.moveTo(i_dot.x, i_dot.y); ctx.lineTo(j_dot.x, j_dot.y); ctx.stroke(); ctx.closePath(); } } } } } function drawDots() { for(i = 0; i < dots.nb; i++){ var dot = dots.array[i]; dot.draw(); } } function animateDots() { ctx.clearRect(0, 0, canvas.width, canvas.height); moveDots(); connectDots(); drawDots(); requestAnimationFrame(animateDots); } document.querySelector('canvas').addEventListener('mousemove',function(e){ mousePosition.x = e.pageX; mousePosition.y = e.pageY; }) document.querySelector('canvas').addEventListener('mouseleave',function(e){ mousePosition.x = canvas.width / 2; mousePosition.y = canvas.height / 2; }) createDots(); requestAnimationFrame(animateDots);

炫酷的粒子背景 html例項

炫酷的粒子背景 html例項

炫酷 CSS 背景效果的 10 個代碼片段

炫酷粒子表白 | 聽說女神都想談戀愛了！

3D炫酷雪花背景的實現

Sublime Text2 新建文件快速生成Html頭部信息和炫酷的代碼補全

C語言實現粒子運動效果，最美C語言！最炫酷C語言！

酷炫字體背景圖的實現——神奇的background-clip: text

原生JS例項之輪播圖《由簡單到炫酷》系列二

原生JS例項之輪播圖《由簡單到炫酷》系列一

css hover背景炫酷點綴

炫酷生動的迴圈視訊背景網頁設計實戰

HTML炫酷文字流

基於 Vue.js 2.0 酷炫自適應背景視訊登入頁面的設計

HTML5與JQuery炫酷經典例項

005_HTML製作炫酷登入介面（CSS精靈圖、背景圖片區域性顯示）

幾種css炫酷背景欣賞

html中的那些炫酷吊炸天的操作

炫酷HTML5網頁背景動畫

jQuery UI炫酷雨滴落在水面上的波紋漣漪特效

js網站輪播圖怎麽做如何做？雞哥教你簡單制作效果炫酷

炫酷的粒子背景 html例項

相關推薦