HTML5 Canvas crée des effets d'arrière-plan Web super rêveurs-tutoriel HTML-php.cn

HTML5 Canvas crée des effets d'arrière-plan Web super rêveurs

黄舟

Libérer： 2017-01-18 14:16:58

original

2073 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un effet d'arrière-plan Web super rêveur créé à l'aide de javascript et HTML5 Canvas. Cet effet d'arrière-plan de page Web utilise deux éléments de toile qui se chevauchent pour créer un effet de rêve de mouvement circulaire de lumière et d'ombre, ce qui est très cool.

Comment utiliser

la structure HTML

Utiliser 2 éléments

<canvas id="c1"></canvas>
<canvas id="c2"></canvas>

Copier après la connexion

Style CSS

Ajoutez le style CSS suivant à cet effet d'arrière-plan pour afficher l'arrière-plan en plein écran.

canvas {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#c1 {opacity: 0;}
#c2 {background: #000;}

Copier après la connexion

JavaScript

Créez d'abord un ensemble de 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 = [];

Copier après la connexion

Les fonctions auxiliaires de base sont les suivantes :

/**
 * 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);
  };
}

Copier après la connexion

Utiliser le code suivant Pour créer une animation :

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

Copier après la connexion

Le code suivant est utilisé pour gérer l'événement zoom de la fenêtre du navigateur. La fonction

function resize() {
  canvasWidth = c1.width = c2.width = parentEl.offsetWidth;
  canvasHeight = c1.height = c2.height = parentEl.offsetHeight;
}

Copier après la connexion

animate() est utilisée pour créer une animation d'arrière-plan.

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

Copier après la connexion

Enfin, la fonction init() est utilisée pour le travail d'initialisation.

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();

Copier après la connexion

Ce qui précède est le contenu de HTML5 Canvas pour créer des effets d'arrière-plan de page Web super rêveurs. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !