This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Feb 18th, 2013  |  syntax: None  |  size: 3.16 KB  |  views: 24  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.     <header>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>Bouncing Ball Paint</title>
  5.         <body>
  6.             Welcome to Paint Brush!
  7.             Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</body>
  8.         <body>
  9.         <style>
  10.         #ball{background:#CCC;}
  11.         </style>
  12.     </header>
  13.     <body style="background-color:#FFDEAD;">
  14.         Ball Width: <input type="text" id="lineWidth"></input>
  15.         Ball Color: <input type="text" id="lineColor"></input>
  16.         Ball Speed X:<input type="text" id="speedx"></input>
  17.         <input type="button" value="Clear" onClick="window.location.href=window.location.href">
  18.         <input type="button" value="Green" id="green" onclick= "DGN.GreenRect()" />
  19.         <div id="container">
  20.  
  21.  
  22.         <canvas id="ball" width="1000" height="700"></canvas>
  23.  
  24.         <script type="text/javascript"
  25.  
  26.         src="balledit3.js"> </script>
  27.  
  28.     </body>
  29. </html>
  30.        
  31. var x=50;
  32. var y=300;
  33. var dx=10;
  34. var dy=10;
  35.  
  36. function draw(){
  37.     var canvas = document.getElementById('ball');
  38.     context= ball.getContext('2d');
  39.     context.clearRect(0,0,canvas.width,canvas.height);
  40.     lineColor = (document.getElementById('lineColor').value.length>0)?document.getElementById('lineColor').value:'#0000FF';
  41.     lineWidth = (document.getElementById('lineWidth').value.length>0)?document.getElementById('lineWidth').value:'10';
  42.     context.beginPath();
  43.     context.fillStyle=lineColor;
  44.     context.arc(x,y,lineWidth,20,Math.PI*2,true);
  45.     context.closePath();
  46.     if (lineWidth){
  47.         context.lineWidth=lineWidth;
  48.     }
  49.     if (lineColor){
  50.         context.strokeStyle=lineColor;
  51.         context.stroke();
  52.     }
  53.     context.fill();
  54.     if( x<0 || x>1000)
  55.     dx=-dx;
  56.     if( y<0 || y>700)
  57.     dy=-dy;
  58.     x+=dx;
  59.     y+=dy;
  60.     fr = (document.getElementById('speedx').value>0)?document.getElementById('speedx').value:50;
  61.     setTimeout(draw,fr);  
  62. }
  63. draw();
  64.        
  65. <!DOCTYPE html>
  66.  
  67. <html>
  68.     <head>
  69.         <title>Bouncing Ball Paint</title>
  70.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  71.         <style>#ball{background:#CCC;}</style>
  72.     </head>
  73.     <body style="background-color:#FFDEAD;">
  74.         <p>Welcome to Paint Brush!</p>
  75.         <p>Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</p>
  76.         <form id="container">
  77.             <fieldset>
  78.                 <label>Ball Width:</label><input type="text" id="lineWidth" />
  79.                 <br />
  80.                 <label>Ball Color:</label><input type="text" id="lineColor" />
  81.                 <br />
  82.                 <label>Ball Speed X:<input type="text" id="speedx" />
  83.             </fieldset>
  84.             <input type="reset" value="Clear" />
  85.             <input type="button" value="Green" id="green" onclick="javascript:DGN.GreenRect();" />
  86.             <fieldset>
  87.                 <canvas id="ball" width="1000" height="700">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
  88.             </fieldset>
  89.         </form>
  90.         <script type="text/javascript" src="draw.js"></script>
  91.     </body>
  92. </html>
clone this paste RAW Paste Data