Advertisement
BrU32

JS Canvas Webcam Split Piece Of Pie FX SRC

Jan 12th, 2017
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.87 KB | None | 0 0
  1.  
  2. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  3. <script>
  4. var ii=1;
  5. var video = document.getElementById("video");
  6. var c = document.getElementById("canvas");
  7. var ctx = c.getContext("2d");
  8. var canvas = document.getElementById('canvas');
  9. var context = canvas.getContext('2d');
  10. var video = document.getElementById('video');
  11. var mediaConfig = { video: true,audio:false};
  12. function drawe(){
  13. var possible = "FABCGDE0123456789";
  14. var text = "";
  15. var canvas = document.getElementById("canvas");
  16. var ctx = canvas.getContext("2d");
  17. for(var i=0; i!=6; i++)
  18. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  19. ctx.fillStyle="#"+text;
  20. ctx.beginPath();
  21. ctx.arc(event.x,event.y,event.y,Math.PI*event.x,Math.PI*event.y);
  22. ctx.fill();
  23. ctx.topmost=true;
  24. ctx.stroke();
  25. //text='';
  26. }
  27. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  28. if(ctx.width==500){event.mouseMove++;}
  29. video.src = this.window.URL.createObjectURL(stream);
  30. video.play();
  31. video.addEventListener("play", function() {i = window.setInterval(function() {
  32. canvas.style.opacity-=0.1
  33. canvas.style.opacity++;
  34. ctx.topmost=false;
  35. ctx.drawImage(video,0,1,500,500)},100);
  36. 0
  37. drawe;
  38. }, false);
  39. });
  40. </script>
  41. <center>
  42. <body bgcolor="#000000" onload="setInterval('t();',13033)"/>
  43. <canvas id="canvas" width="5000" height="5000" style="border:4px; background-color:black"></canvas>
  44. <script>
  45. function t(){
  46. var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
  47. size = Math.random()*100,
  48. x = Math.random()*100,
  49. y = Math.random()*100;
  50.  
  51. canvas.beginPath();
  52.  
  53.  
  54. canvas.lineTo(x*Math.sqrt(33) * Math.cos(side * 6 * Math.PI / 14), y + size * Math.sin(side * 8 * Math.PI / 14));
  55.  
  56.  
  57. canvas.fillStyle = "#0FF333";
  58. canvas.fill();
  59. canvas.draw();
  60. }
  61. </script>
  62. <body bgcolor="white"/>
  63. <canvas id="canvas"></canvas>
  64.  
  65.  
  66. <style>
  67. canvas{
  68. filter:invert(433%);
  69. filter:saturate(1114%);
  70.  
  71. }
  72. </style>
  73. <center>
  74. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  75. <video id="video" autoplay hidden>
  76. </video>
  77. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="1000" height="1000" style="opacity:1.0;fillColor:none; width:500px">
  78. <script>
  79. var i=22
  80. var video = document.getElementById("video");
  81. var canvas = document.getElementById("canvas");
  82. var ctx = canvas.getContext("2d");
  83. var video = document.getElementById('video');
  84. var mediaConfig = { video: true,audio:true};
  85. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  86. video.src = this.window.URL.createObjectURL(stream);
  87. video.play();
  88. video.addEventListener("play", function() {i = window.setInterval(function() {
  89. ctx.drawImage(video,i,i,500,500)},Math.random()*1000);
  90. ctx.draw();
  91. },true);
  92. });
  93. </script>
  94. </body>
  95. </html>>
  96. </body>
  97. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement