Post
Ask Question

Rain Drop Using Canvas in HTML5

Cross-Browser HTML5 Canvas

 
Canvas is a relatively new HTML5 technology that provides a "scriptable" image. You can add a <canvas> element to your page and draw on its surface using JavaScript commands.
 
The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.
A "canvas" tag can be placed on an HTML5 page with the following code:
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">  
  2. Your browser does not support the HTML5 canvas tag.  
  3. </canvas> 
Assuming that the canvas tag is supported, JavaScript can be used to draw directly onto the canvas.
 
First, we will find the "<canvas>" element:
 
var c=document.getElementById("myCanvas"); 
 
Then, call its "getContext()" method (you must the string "2d" to the "getContext()" method):
 
var ctx=c.getContext("2d"); 
 
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, etc.
 
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 
 
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
 
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.
 
Step 1:
 
Beginning with the code, our HTML5 head contains a small script that declares a canvas element.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>Canvas Example</title>  
  6.     <script>  
  7.         document.createElement("canvas");  
  8.     </script>  
Step 2: 

We can now define CSS styles for our canvas tag.
  1. <style>    
  2.     #mycanvas {    
  3.         float: left;    
  4.         width: 300px;    
  5.         height: 300px;    
  6.         margin: 0 20px 0 0;    
  7.         background-image: url(rain.jpg);    
  8.         border: 1px solid #000;    
  9.     }    
  10.    
  11.         #mycanvas.active {    
  12.             background-image: none;    
  13.         }   
  14. </style> 
Step 3:
 
We can now place a canvas tag on the page.
  1. </head>  
  2. <body>  
  3.     <h1>HTML Canvas Example with Image Fall Back</h1>  
  4.     <canvas id="mycanvas" width="300" height="300"></canvas> 
Step 4:
 
The first few lines check whether canvas is supported, and applies a class of "active" to the element to remove the static background:
  1. var canvas = document.getElementById("mycanvas");  
  2.     if (canvas.getContext) {  
  3.         // canvas supported  
  4.         canvas.className = "active"; 
Step 5:
 
The following will start the animation:
  1. // start animation  
  2.        var cxt = canvas.getContext("2d");  
  3.        cxt.fillStyle = "rgba(255,255,255,0.5)";  
  4.        setInterval(function() {  
  5.               var    x = Math.round(Math.random()*canvas.width),  
  6.                      y = Math.round(Math.random()*canvas.height),  
  7.                      e = 20 + Math.round(Math.random()*30),  
  8.                      s = 0;  
  9.               (function() {  
  10.                      s++;  
  11.                      if (s <= e) {  
  12.                            setTimeout(arguments.callee,s);  
  13.                            var c = 255-(e-s)*3;  
  14.                            cxt.strokeStyle = "rgb("+c+","+c+","+c+")";  
  15.                            cxt.beginPath();  
  16.                            cxt.arc(x,y,s,0,Math.PI*2,true);  
  17.                            cxt.fill();  
  18.                            cxt.stroke();  
  19.                      }  
  20.               })();  
  21.        },100);  
  22. } 
Example:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>Canvas Example</title>  
  6.     <script>  
  7.         document.createElement("canvas");  
  8.     </script>  
  9.     <style>  
  10.         body {  
  11.             font-family: sans-serif;  
  12.             margin: 20px;  
  13.             color: #333;  
  14.             background-color: #fff;  
  15.         }  
  16.   
  17.         #mycanvas {  
  18.             float: left;  
  19.             width: 300px;  
  20.             height: 300px;  
  21.             margin: 0 20px 0 0;  
  22.             background-image: url(rain.jpg);  
  23.             border: 1px solid #000;  
  24.         }  
  25.   
  26.             #mycanvas.active {  
  27.                 background-image: none;  
  28.             }  
  29.     </style>  
  30. </head>  
  31. <body>  
  32.    
  33.     <h1>HTML Canvas Example</h1>  
  34.     <canvas id="mycanvas" width="300" height="300"></canvas>  
  35.     <p>This page works in any browser.</p>  
  36.    
  37.     <script>  
  38.         var canvas = document.getElementById("mycanvas");  
  39.         if (canvas.getContext) {  
  40.    
  41.             // canvas supported  
  42.             canvas.className = "active";  
  43.    
  44.             // start animation  
  45.             var cxt = canvas.getContext("2d");  
  46.             cxt.fillStyle = "rgba(255,255,255,0.5)";  
  47.    
  48.             setInterval(function () {  
  49.                 var x = Math.round(Math.random() * canvas.width),  
  50.                     y = Math.round(Math.random() * canvas.height),  
  51.                     e = 20 + Math.round(Math.random() * 30),  
  52.                     s = 0;  
  53.    
  54.                 (function () {  
  55.                     s++;  
  56.                     if (s <= e) {  
  57.                         setTimeout(arguments.callee, s);  
  58.                         var c = 255 - (e - s) * 3;  
  59.                         cxt.strokeStyle = "rgb(" + c + "," + c + "," + c + ")";  
  60.                         cxt.beginPath();  
  61.                         cxt.arc(x, y, s, 0, Math.PI * 2, true);  
  62.                         cxt.fill();  
  63.                         cxt.stroke();  
  64.                     }  
  65.                 })();  
  66.             }, 100);  
  67.    
  68.         }  
  69.     </script>  
  70. </body>  
  71. </html> 
Output
 
rain.jpg


Similar Articles