Brief Tutorial
This is a super dreamy web background effect created using javascript and HTML5 Canvas. This web page background effect uses two canvas elements to overlap to create a dreamy effect of circular light and shadow movement, which is very cool.
Usage method
HTML structure
Use 2
<canvas id="c1"></canvas> <canvas id="c2"></canvas>
CSS style
Add the following CSS style to this background effect to display the background in full screen.
canvas { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } #c1 {opacity: 0;} #c2 {background: #000;}
JavaScript
First create a set of variables:
var parentEl; var c1; var c2; var ctx1; var ctx2; var canvasWidth; var canvasHeight; var sizeBase; var count; var hue; var options; var parts = [];
The core auxiliary functions are as follows:
/** * Helper function to create a HTML5 canvas and add a class to it * @return {[canvas]} */ function createCanvas() { var canvas = document.createElement('canvas'); canvas.classList.add('canvas'); return canvas; } /** * Helper function to generate a random value between min and max * @param {[int]} min [min value] * @param {[int]} max [max value] * @return {[int]} [random value between min and max] */ function rand(min, max) { return Math.random() * (max-min) + min; } /** * Helper function to generate hsla string for canvas 2d context * @param {[int]} h [hue] * @param {[int]} s [saturation] * @param {[int]} l [lightness] * @param {[float]} a [alpha] * @return {[string]} */ function hsla(h, s, l, a) { return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')'; } /** * Helper function used for debouncing * @param {[Function]} fn [function to debounce] * @param {[int]} delay [debounce delay] */ function debounce(fn, delay) { var timer = null; return function() { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; }
Use the following code to create animations:
function createAnimation() { sizeBase = canvasWidth + canvasHeight; count = Math.floor(sizeBase * 0.3); hue = rand(0, 360); options = { radiusMin: 1, radiusMax: sizeBase * 0.04, blurMin: 10, blurMax: sizeBase * 0.04, hueMin: hue, hueMax: hue + 100, saturationMin: 10, saturationMax: 70, lightnessMin: 20, lightnessMax: 50, alphaMin: 0.1, alphaMax: 0.5 } ctx1.clearRect(0, 0, canvasWidth, canvasHeight); ctx1.globalCompositeOperation = 'lighter'; while(count--) { //init variables for canvas context var radius = rand(options.radiusMin, options.radiusMax); var blur = rand(options.blurMin, options.blurMax); var x = rand(0, canvasWidth); var y = rand(0, canvasHeight); var hue = rand(options.hueMin, options.hueMax); var saturation = rand(options.saturationMin, options.saturationMax); var lightness = rand(options.lightnessMin, options.lightnessMax); var alpha = rand(options.alphaMin, options.alphaMax); //draw on canvas context ctx1.shadowColor = hsla(hue, saturation, lightness, alpha); ctx1.shadowBlur = blur; ctx1.beginPath(); ctx1.arc(x, y, radius, 0, Math.PI * 2); ctx1.closePath(); ctx1.fill(); } parts.length = 0; //clear parts array for (var i = 0; i < Math.floor((canvasWidth + canvasHeight) * 0.03); i++) { parts.push({ radius: rand(1, sizeBase * 0.03), x: rand(0, canvasWidth), y: rand(0, canvasHeight), angle: rand(0, Math.PI * 2), vel: rand(0.1, 0.5), tick: rand(0, 10000) }); } }
The following code is used to handle the zoom event of the browser window.
function resize() { canvasWidth = c1.width = c2.width = parentEl.offsetWidth; canvasHeight = c1.height = c2.height = parentEl.offsetHeight; }
The animate() function is used to create background animation.
function animate() { window.requestAnimationFrame(animate); ctx2.clearRect(0, 0, canvasWidth, canvasHeight); ctx2.globalCompositeOperation = 'source-over'; ctx2.shadowBlur = 0; ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2 ctx2.globalCompositeOperation = 'lighter'; var i = parts.length; ctx2.shadowBlur = 15; ctx2.shadowColor = '#fff'; while(i--) { var part = parts[i]; part.x += Math.cos(part.angle) * part.vel; part.y += Math.sin(part.angle) * part.vel; part.angle += rand(-0.05, 0.05); ctx2.beginPath(); ctx2.arc(part.x, part.y, part.radius, 0, Math.PI * 2); var alpha = 0.075 + Math.cos(part.tick * 0.02) * 0.05; ctx2.fillStyle = hsla(0, 0, 100, alpha); ctx2.fill(); //make sure particles stay within canvas bounds if (part.x - part.radius > canvasWidth) { part.x = -part.radius; } if (part.x + part.radius < 0) { part.x = canvasWidth + part.radius; } if (part.y - part.radius > canvasHeight) { part.y = -part.radius; } if (part.y + part.radius < 0) { part.y = canvasHeight + part.radius; } part.tick++; } }
Finally, the init() function is used for initialization work.
function init() { //create canvases c1 = createCanvas(); c2 = createCanvas(); ctx1 = c1.getContext('2d'); ctx2 = c2.getContext('2d'); parentEl = document.getElementById('wrapper'); parentEl.insertBefore(c2, parentEl.firstChild); parentEl.insertBefore(c1, c2); resize(); createAnimation(); animate(); window.addEventListener('resize', debounce(function() { resize(); createAnimation(); }, 250)); } init();
The above is the content of HTML5 Canvas to create super dreamy web background effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!