Advertisement
BrU32

JS/JQ Webam Canvas Image Inner Spinning FX SRC V1

Jan 19th, 2017
418
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.52 KB | None | 0 0
  1.  
  2.  
  3. <center>
  4. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubkeclick="drawe;">
  5. <video id="video" autoplay hidden>
  6. </video>
  7. <canvas id="canvas" onchange="drawe;" topmost=false onchange="drawe;" width="500" height="500" style="opacity:1.0;fillColor:none;">
  8. <script>
  9. var ii=1;
  10. var inn=244;
  11. var video = document.getElementById("video");
  12. var c = document.getElementById("canvas");
  13. var ctx = c.getContext("2d");
  14. var canvas = document.getElementById('canvas');
  15. var context = canvas.getContext('2d');
  16. var video = document.getElementById('video');
  17. var mediaConfig = { video: true,audio:false};
  18. function drawe(){
  19. var possible = "FABCGDE0123456789";
  20. var text = "";
  21. var canvas = document.getElementById("canvas");
  22. var ctx = canvas.getContext("2d");
  23. for(var i=0; i!=6; i++)
  24. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  25. ctx.strokeStyle="#"+text;
  26.  
  27. ctx.topmost=true;
  28. text='';
  29. }
  30. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  31. if(ctx.width==500){event.mouseMove++;}
  32. video.src = this.window.URL.createObjectURL(stream);
  33. video.play();
  34. video.addEventListener("play", function() {i = window.setInterval(function() {
  35.  
  36. ctx.topmost=false;
  37. ctx.rotate(1000);
  38. ctx.drawImage(video,1,1,330,330)},9);
  39.  
  40. ctx.rotate(ii);
  41. ctx.draw();
  42.  
  43.  
  44. }, false);
  45. });
  46. </script>
  47. <center>
  48. <canvas id="canvas" width='1000' height='1000'></canvas>
  49.  
  50. <body bgcolor="white" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubleclick="drawe;">
  51. <video id="video" autoplay hidden>
  52. </video><center>
  53. <canvas id="myCanvas" left="2240" width="2240" height="1220" style="border:22px solid grea;">
  54. Your browser does not support the HTML5 canvas tag.</canvas>
  55. <script>
  56. var c = document.getElementById("myCanvas");
  57. var ctx = c.getContext("2d");
  58. ctx.shadowBlur = 20;
  59. ctx.fillStyle = "red";
  60. ctx.shadowColor = "blue";
  61. ctx.shadowColor = "blue";
  62. ctx.fillRect(Math.random()*50, Math.random()*20, Math.random)*500, Math.random()*1000));
  63.  
  64. </script>
  65. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  66. <script>
  67. $(document).mousemove(function(e){
  68. $('p').css("font-size", "10px");
  69. $('p').css("color", "red");
  70. $("canvas").slideToggle(Math.random()*3000);
  71. ctx.fillRect(Math.random()*1000, Math.random()*1000, Math.random()*100, 80);
  72. });
  73. </script>
  74. </head>
  75. <body>
  76. </html>
  77. <canvas id="canvas" width="10000" height="10000"style="opacity:1.0;fillColor:white;">
  78. <script>
  79. var ii=1;
  80.  
  81. var video = document.getElementById("video");
  82. var c = document.getElementById("canvas");
  83. var ctx = c.getContext("2d");
  84. var canvas = document.getElementById('canvas');
  85. var context = canvas.getContext('2d');
  86. var video = document.getElementById('video');
  87. var mediaConfig = { video: true,audio:false};
  88. function drawe(){
  89. }
  90. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  91. video.src = this.window.URL.createObjectURL(stream);
  92. video.play();
  93. video.addEventListener("play", function() {i = window.setInterval(function() {
  94. canvas.style.opacity+=1.2;
  95. ctx.drawImage(video,ii,ii,1000,1000)},9);
  96. ctx.draw();
  97. drawe1();
  98. }, false);
  99. });
  100. function drawe1(){
  101. var text = "";
  102. var possible = "FABCGDE0123456789";
  103. var canvas = document.getElementById("myCanvas");
  104. var ctx = canvas.getContext("2d");
  105. ctx.moveTo(CurY,CurX);
  106. for(var i=0; i!=6; i++)
  107. text+=possible.charAt(Math.floor(Math.random()*possible.length));
  108. ctx.strokeStyle=''+text;
  109. text='';
  110. ctx.lineTo(Math.random()*CurX,Math.random()*CurY);
  111. ctx.stroke()
  112. ctx.paint();
  113. ctx.clear();
  114. }
  115. </script>
  116. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement