Belajar HTML5 Dan Canvas Membuat Efek Background Lampu Neon

Labkom99.com – Belajar HTML5 Dan Canvas Membuat Efek Background Lampu Neon. Background lampu neon adalah efek latar belakang mirip sarang lebah dengan lampu neon punuh warna. Efek background dan lampu ini di buat menggunakan canvas HTML5. Background lampu neon warna dibuat dengan kanvas dan HTM5. Gerakan partikelnya membentuk sarang lebah heksagonal dan warnanya terus berubah-ubah menghasilkan kombinasi yang sangat keren.

Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :

Perhatian

Dalam membuat Efek Background Lampu Neon hanya menggunakan Canvas dan HTML5. Efek ini dibuat dengan sangat sederhana, hanya dengan sedikit tag-tag HTML yang digunakan. Bagi anda yang belum begitu paham tentang HTML bisa di pelajari di Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language, Struktur dasar HTML .

Metode / Langkah

Untuk Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas di butuhan tag Canvas seperti pada di bawah ini:

<div class="labkom99-content">
    <canvas id="c"></canvas>
</div>

Kode tersebut untuk menentukan Canvas yang digunakan. Kemudian membuat CSS untuk menentukan posisi efek animasi pada background canvas yang akan di buat

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

Kemudian membuat Kode js untuk mengimplementasikan background lampu neon warna sarang lebah. Dan kodenya adalah sebagai berikut:

Membuat Efek Animasi Dengan HTML Dan CSS3

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
     
    opts = {
       
      len: 20,
      count: 50,
      baseTime: 10,
      addedTime: 10,
      dieChance: .05,
      spawnChance: 1,
      sparkChance: .1,
      sparkDist: 10,
      sparkSize: 2,
       
      color: 'hsl(hue,100%,light%)',
      baseLight: 50,
      addedLight: 10, // [50-10,50+10]
      shadowToTimePropMult: 6,
      baseLightInputMultiplier: .01,
      addedLightInputMultiplier: .02,
       
      cx: w / 2,
      cy: h / 2,
      repaintAlpha: .04,
      hueChange: .1
    },
     
    tick = 0,
    lines = [],
    dieX = w / 2 / opts.len,
    dieY = h / 2 / opts.len,
     
    baseRad = Math.PI * 2 / 6;
     
ctx.fillStyle = 'black';
ctx.fillRect( 0, 0, w, h );
 
function loop() {
   
  window.requestAnimationFrame( loop );
   
  ++tick;
   
  ctx.globalCompositeOperation = 'source-over';
  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
  ctx.fillRect( 0, 0, w, h );
  ctx.globalCompositeOperation = 'lighter';
   
  if( lines.length < opts.count && Math.random() < opts.spawnChance )
    lines.push( new Line );
   
  lines.map( function( line ){ line.step(); } );
}
function Line(){
   
  this.reset();
}
Line.prototype.reset = function(){
   
  this.x = 0;
  this.y = 0;
  this.addedX = 0;
  this.addedY = 0;
   
  this.rad = 0;
   
  this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
   
  this.color = opts.color.replace( 'hue', tick * opts.hueChange );
  this.cumulativeTime = 0;
   
  this.beginPhase();
}
Line.prototype.beginPhase = function(){
   
  this.x += this.addedX;
  this.y += this.addedY;
   
  this.time = 0;
  this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0;
   
  this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 );
  this.addedX = Math.cos( this.rad );
  this.addedY = Math.sin( this.rad );
   
  if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )
    this.reset();
}
Line.prototype.step = function(){
   
  ++this.time;
  ++this.cumulativeTime;
   
  if( this.time >= this.targetTime )
    this.beginPhase();
   
  var prop = this.time / this.targetTime,
      wave = Math.sin( prop * Math.PI / 2  ),
      x = this.addedX * wave,
      y = this.addedY * wave;
   
  ctx.shadowBlur = prop * opts.shadowToTimePropMult;
  ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) );
  ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 );
   
  if( Math.random() < opts.sparkChance )
    ctx.fillRect( opts.cx + ( this.x + x ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.cy + ( this.y + y ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize )
}
loop();
 
window.addEventListener( 'resize', function(){
   
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  ctx.fillStyle = 'black';
  ctx.fillRect( 0, 0, w, h );
   
  opts.cx = w / 2;
  opts.cy = h / 2;
   
  dieX = w / 2 / opts.len;
  dieY = h / 2 / opts.len;
});