HTML5 Canvas는 환상적인 웹 배경 효과를 만듭니다.

간단한 튜토리얼

자바스크립트와 HTML5 Canvas를 사용하여 만든 매우 몽환적인 웹 배경 효과입니다. 이 웹 페이지 배경 효과는 두 개의 캔버스 요소를 겹쳐 사용하여 원형 빛과 그림자 움직임의 몽환적인 효과를 만들어 내는데, 이는 매우 멋집니다.

사용법

HTML 구조

2개의 요소를 배경의 HTML 구조로 사용:

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

CSS 스타일

배경이 전체 화면으로 표시되도록 하려면 이 배경 효과에 다음 CSS 스타일을 추가하세요.

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

JavaScript

먼저 변수 세트를 생성합니다:

var parentEl;
var c1;
var c2;
var ctx1;
var ctx2;
var canvasWidth;
var canvasHeight;
var sizeBase;
var count;
var hue;
var options;
var parts = [];

핵심 보조 기능은 다음과 같습니다.

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

다음 코드를 사용하여 애니메이션을 생성합니다. :

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

다음 코드는 브라우저 창의 확대/축소 이벤트를 처리하는 데 사용됩니다.

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

animate() 함수는 배경 애니메이션을 만드는 데 사용됩니다.

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

마지막으로 초기화 작업에는 init() 함수가 사용됩니다.

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

위는 몽환적인 웹페이지 배경효과를 만들기 위한 HTML5 Canvas의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!