Advanced Search

Canvas tag reflection effect

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function drawCD() {
  2.   var g2 = document.getElementById("cdCover").getContext("2d");
  3.  
  4.   g2.save();
  5.   g2.translate(0, cdCase.height * 2 - 1);
  6.   g2.scale(1, -1);
  7.  
  8.   g2.beginPath();
  9.   g2.moveTo(0, cdCase.height / 2);
  10.   g2.lineTo(cdCase.width, cdCase.height / 2);
  11.   g2.lineTo(cdCase.width, cdCase.height + 1);
  12.   g2.lineTo(0, cdCase.height + 1);
  13.   g2.clip();
  14.  
  15.   g2.drawImage(cover, 19, 3, 240, 227);
  16.   g2.drawImage(reflections, 0, 0);
  17.   g2.drawImage(stitch, 19, 3);
  18.   g2.drawImage(cdCase, 0, 0);
  19.  
  20.   g2.globalCompositeOperation = "destination-out";
  21.   var alphaMask = g2.createLinearGradient(0, cdCase.height / 2, 0, cdCase.height);
  22.   alphaMask.addColorStop(0, "rgba(255, 255, 255, 1.0)");
  23.   alphaMask.addColorStop(1.0, "rgba(255, 255, 255, 0.5)");
  24.   g2.fillStyle = alphaMask;
  25.   g2.fillRect(0, cdCase.height / 2, cdCase.width, cdCase.height / 2);
  26.  
  27.   g2.restore();
  28.  
  29.   g2.drawImage(cover, 19, 3, 240, 227);
  30.   g2.drawImage(reflections, 0, 0);
  31.   g2.drawImage(stitch, 19, 3);
  32.   g2.drawImage(cdCase, 0, 0);
  33. }

URL: http://ajaxian.com/archives/killer-effects-with-canvas

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.