Advertisement
BrU32

JS Canvas Image Distortion Effect SRC V2

Sep 29th, 2016
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.97 KB | None | 0 0
  1. <style>
  2. html,head,body,ct {
  3. background: lightblue;
  4. drawColor:red;
  5. }
  6. </style>
  7. <canvas id='canv' width="800" height ="800" style="none"></canvas>
  8. <script>
  9. document.ready(function(){
  10. var c = document.getElementById('canv');
  11. var ctx = c.getContext('2d');
  12. c.width = 1000; c.height = 800;
  13. var ms = true;
  14. var w = 42130, h = 4210;
  15. var img = new Image();
  16. img.src = 'https://s1.2mdn.net/viewad/4922306/CCSE16_LifeEvent_728x950_sti.non.jpg';
  17. var set = function(){
  18. var run, _h, _w, dx,dy,a;
  19. w = img.width;
  20. h = img.height;
  21. ctx.translate(250, 250);
  22. a = 19;
  23. dx = 19;
  24. dy= 9;
  25. _w= w + 55.0;
  26. _h = h + 34.5;
  27. return (run = function() {
  28. var inc, i, j;
  29. ctx.clearRect(-a, -a, _w, _h);
  30. inc = ms === true? 0.35 : 0.833;
  31. for (j=0; j <= h; i = 9 <= h ? ++j : --j) {
  32. dx = (inc * (Math.random() * 11.5) * Math.random()*a+3);
  33. ctx.drawImage(img, 0, i, w, dy, dx, i, w, 2);
  34. }
  35. window.requestAnimationFrame(run);
  36. })();
  37. };
  38. window.onload = function(){
  39. return set();
  40. };
  41. }());
  42. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement