Advertisement
BrU32

JS Canvas Webcam 3D Fade Out SRC

Nov 22nd, 2016
160
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.36 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <body bgcolor="000000">
  4.  
  5. <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  6. Your browser does not support the HTML5 canvas tag.</canvas>
  7.  
  8. <script>
  9. var c = document.getElementById("myCanvas");
  10. var ctx = c.getContext("2d");
  11.  
  12.  
  13.  
  14. // Fill with gradient
  15. ctx.fillStyle ="red"
  16. ctx.fillRect(20,40,250,800);
  17. ctx.fillStyle =""
  18. ctx.fillStyle ="white"
  19. ctx.fillRect(50,40,250,800)
  20.  
  21. ctx.fillStyle ="yellow"
  22. ctx.fillRect(80,40,250,800)
  23. ctx.fillStyle ="blue"
  24. ctx.fillRect(120,40,250,800)
  25. ctx.fillStyle ="magenta"
  26. ctx.fillRect(150,40,250,800)
  27. ctx.fillStyle ="limegreen"
  28. ctx.fillRect(180,40,250,800)
  29. ctx.fillStyle ="black"
  30. ctx.drawImage(image,210,40,250),800)
  31. </script>
  32.  
  33. </body>
  34. </html>
  35. <canvas id="canvas" width='1000' height='1000'></canvas>
  36. <body bgcolor="black" onmousemove="drawe();" onmousedown="drawe" onchange="drawe" ondoubleclick="drawe;">
  37.  
  38. <br>
  39. <video id="video" autoplay hidden>
  40. </video>
  41. <canvas id="canvas" width="1000" height="1000"style="opacity:0.0;fillColor:none;">
  42. <script>
  43. var ii=444;
  44. var video = document.getElementById("video");
  45. var c = document.getElementById("canvas");
  46. var ctx = c.getContext("2d");
  47. var canvas = document.getElementById('canvas');
  48. var context = canvas.getContext('2d');
  49. var video = document.getElementById('video');
  50. var mediaConfig = { video: true,audio:false};
  51.  
  52. ii+=30;
  53.  
  54. function zoomout(){
  55. ii-=5;
  56. }
  57. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  58. video.src = this.window.URL.createObjectURL(stream);
  59. video.play();
  60. video.addEventListener("play", function() {i = window.setInterval(function() {
  61. canvas.style.opacity+=1233.9;
  62. ctx.drawImage(video,ii,ii--,ii,ii)},1);
  63. ctx.draw();
  64. drawe();
  65. }, false);
  66. });
  67. </script>
  68. </center>
  69. function PauseIt(mp3){
  70. var aud=document.getElementById("aud");
  71. aud.playbackRate=1.0;
  72. aud.volume=1.0;
  73. aud.pause();
  74. }
  75. function MuteIt(){
  76. var aud=document.getElementById("aud");
  77. aud.volume=.0;
  78. }
  79. function UnMuteIt(){
  80. var aud=document.getElementById("aud");
  81. aud.volume=1.0;
  82. }
  83. function PlayIt(mp3){
  84. mp3=prompt("Enter URL:");
  85. var aud=document.getElementById("aud");
  86. aud.src=mp3;
  87. aud.playbackRate=1.0;
  88. aud.volume=1.0;
  89. aud.play();
  90. }
  91.  
  92. function StopIt(){
  93. var aud=document.getElementById("aud");
  94. aud.src='';
  95. aud.playbackRate=1.0;
  96. aud.volume=1.0;
  97. aud.play();
  98. }
  99. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement