Sebuah 'screensaver'

Penjimat skrin ..

Demo

HTML view ▼

<div class="labu"><canvas id="screensaver"></canvas>
</div>
<style>
  .labu {  
  margin: 0;
  padding: 0;
  background: #111;
  width: 100%;
  height: 600px;
}
#screensaver {  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
}
</style>
<script>
  ! function () { 
  'use strict';  
  var run = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    hue = (hue < 360) ? (hue + 0.8) : 0; 
    ctx.strokeStyle = "hsl(" + Math.floor(hue) + ", 80%, 80%)";
    ctx.lineWidth = 1;
    if (nPoly < 50) poly[nPoly++] = new Poly();
    for (var i = 0; i < nPoly; i++) {
      poly[i].anim();
    }
      requestAnimationFrame(run);
  }
  var Poly = function () {
    this.p   = [];
    var space = 0.5;
    var dV  = [-space,space,space,-space,-space,space,-space,space];
var xyP = [1,1,2,2,1,3,3,1];
    for (var i = 0; i < 4; i++) { 
      this.p[i] = {
        dx: 5 * dV[i],
        dy: 5 * dV[i + 4],
        x: 5 * ((canvas.width / 25 / (2 * 4)) * xyP[i] * 10),
        y: 4 * ((canvas.height / 20 / (2 * 4)) * xyP[i + 4] * 10)
      }
    }    
  }
  Poly.prototype.anim = function () {
    ctx.beginPath();
    ctx.moveTo(this.p[0].x, this.p[0].y);
    ctx.lineTo(this.p[1].x, this.p[1].y);
    ctx.lineTo(this.p[2].x, this.p[2].y);
    ctx.lineTo(this.p[3].x, this.p[3].y);
    ctx.closePath();
    ctx.stroke();
    for (var i = 0; i < 4; i++) {
      var l = this.p[i];
      l.x += l.dx;
      l.y += l.dy;
      if (l.x < 0) l.dx = -l.dx; else if (l.x > canvas.width) l.dx = -l.dx;
      if (l.y > canvas.height) l.dy = -l.dy; else if (l.y < 0) l.dy = -l.dy;
    } 
  }
  var canvas = {width:0, height:0, elem: document.getElementById('screensaver')};
  var ctx = canvas.elem.getContext("2d");
  ctx.translate(2, 2);
  var hue = 800;
  canvas.resize = function() {
    this.width = this.elem.width = this.elem.offsetWidth * 1;
    this.height = this.elem.height = this.elem.offsetHeight * 1;
  }
  window.addEventListener('resize', canvas.resize.bind(canvas), false);
  canvas.resize();
  var poly = [], nPoly = 0;
  run();
}();
</script>

Tutup

CSS demo disesuaikan untuk paparan blog, dipetik dari codepen/ponycorn