Canvas tag reflection effect


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



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.