daily pastebin goal
67%
SHARE
TWEET

HTML5 Tutorial Ep1 by Raining Chain

a guest Jul 14th, 2013 8,857 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
  2.  
  3. <script>  
  4. var ctx = document.getElementById("ctx").getContext("2d");
  5. ctx.font = '30px Arial';
  6.  
  7. var x = 50;
  8. var spdX = 30;
  9. var y = 40;
  10. var spdY = 5;
  11.  
  12. setInterval(update,500);
  13.  
  14. function update(){
  15.         x += spdX;
  16.         y += spdY;
  17.         ctx.fillText('P',x,y);
  18.         console.log('hello',x);
  19.        
  20.         if(x > 500){
  21.                 console.log('Out of Bounds');
  22.         }
  23.        
  24. }
  25.  
  26. /*      Comment Section
  27.  
  28. //1. Modify Settings =
  29. ctx.font = '30px Arial';        //Font used
  30. ctx.fillStyle = 'red';          //Color of the text and forms
  31. ctx.globalAlpha = 0.5;          //Transparency 0 = invisble, 1 = visible
  32.  
  33. //2. Draw something ()
  34. ctx.fillText('Hello',50,50);    //Write text ... ctx.fillText('text',x,y);
  35. ctx.fillRect(50,50,100,100);            //Draw rectangle ... ctx.fillRect(startX,startY,width,height);
  36. ctx.clearRect(75,75,100,100);           //Clear Canvas ... ctx.fillRect(startX,startY,width,height);
  37.  
  38. x += spdX;      same than       x = x +spdX
  39.  
  40. Debugger:
  41. F12
  42. Breakpoint = Code stops when reaches this line if console is opened
  43. Console = Get the value of variable + Message with console.log('text');
  44.  
  45. End of Comment Section */
  46.  
  47.  
  48. </script>
RAW Paste Data
Top