HTML5 Canvas creates super dreamy web background effects-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML5 Canvas creates super dreamy web background effects

黄舟

Jan 18, 2017 pm 02:16 PM

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>

Copy after login

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;}

Copy after login

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 = [];

Copy after login

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(&#39;canvas&#39;);
  canvas.classList.add(&#39;canvas&#39;);
 
  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 &#39;hsla(&#39; + h + &#39;,&#39; + s + &#39;%,&#39; + l + &#39;%,&#39; + a + &#39;)&#39;;
}
 
/**
 * 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);
  };
}

Copy after login

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 = &#39;lighter&#39;;
 
  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)
    });
  }
}

Copy after login

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;
}

Copy after login

The animate() function is used to create background animation.

function animate() {
  window.requestAnimationFrame(animate);
 
  ctx2.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx2.globalCompositeOperation = &#39;source-over&#39;;
  ctx2.shadowBlur = 0;
  ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2
  ctx2.globalCompositeOperation = &#39;lighter&#39;;
 
  var i = parts.length;
  ctx2.shadowBlur = 15;
  ctx2.shadowColor = &#39;#fff&#39;;
  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++;
  }
}

Copy after login

Finally, the init() function is used for initialization work.

function init() {
  //create canvases
  c1 = createCanvas();
  c2 = createCanvas();
  ctx1 = c1.getContext(&#39;2d&#39;);
  ctx2 = c2.getContext(&#39;2d&#39;);
  parentEl = document.getElementById(&#39;wrapper&#39;);
  parentEl.insertBefore(c2, parentEl.firstChild);
  parentEl.insertBefore(c1, c2);
 
  resize();
  createAnimation();
  animate();
   
  window.addEventListener(&#39;resize&#39;, debounce(function() {
    resize();
    createAnimation();
  }, 250));
}
 
init();

Copy after login

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)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn