अब तक Web Pages मे Graphics और Animations बनाने के लिए कोई Mechanism नही था. इसके लिए Flash और Silverlight जैसी Technologies उपयोग की जाती रही है. लेकिन अब HTML5 की वजह से Web Developers Graphics और Animations Directly Webpages मे बनाने के लिए Capable है.
HTML5 का <canvas> Tag Web Page मे Graphics Design करने के लिए उपयोग किया जाता है. <canvas> Element सिर्फ Graphics के लिए एक Container का काम करता है. इसमे Graphics Draw करने के लिए आप Scripting Language का उपयोग करते है. ज्यादातर इसके साथ Javascript उपयोग की जाती है.
Canvas एक अलग तकनीक मानी जाती है. इसके साथ दोस्तों आपको विभिन प्रकार के Graphics Draw करने के लिए अलग प्रकार के Methods अप्लाई करने होंगे है. इन Methods को दोतो Canvas के Context के द्वारा Access किया जाता है.
Canvas Element एक Element है जो Width और Height Attributes का उपयोग करके HTML Code को Define करता है.
Canvas Element की Real Power हालांकि HTML5 Canvas API का लाभ उठाकर पूरी की गई है .
API का प्रयोग JavaScript मे लिखकर किया जाता है जो Canvas Area को Drawing Functions के माध्यम से Access कर सकता है इस प्रकार गतिशील रूप से उत्पन्न Graphics के लिए अनुमति देता है.
<canvas> Element में स्वयं Drawing Capabilities नहीं है बल्कि यह JavaScript के लिए एक Container है ताकि Users Server से आवश्यक कुछ भी नही के साथ Browser मे Shapes और Text को आकर्षित कर सके.
आप 2D Graphics को आकर्षित कर सकते है और एक Rectangular Bitmap Canvas मे colors Set कर सकते है.
<canvas id="canvas-id" width="int-number" height="int-number">
Syntax of HTML5 Canvas Tag
</canvas>
दोस्तों ऊपर दिये गये Syntax मे आप देख सकते है की किस प्रकार अच्छे से Specify किया गया है Canvas Tag मै Id, Height, Width, Attributes को परिभाषित किया गया है. दोस्तों जब भीआप किसी <canvas> Element का विवरण करते है तो इन Attributes को परिभाषित करना आवश्यक होता है. इन Attributes मे Id Attribute Javascript के द्वारा <canvas> का Context प्राप्त करने के लिए उपयोग किया जाता है और width और height Attributes Canvas की height और width को Define करते है <canvas> Tag को </canvas> Ending Tag से Close किया जाता है.
नीचे <canvas> Element द्वारा एक Rectangle Draw करने के उदाहरण देख सकते है
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Example</title>
<style>
#canvasDiv{
border: 2px #82d502 solid;
}
</style>
</head>
<body>
<h2>HTML5 Canvas Example</h2>
<script type="text/javascript">
var canvas = document.getElementById("canvasDiv");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
// code for drawing goes here
}
else
{
// canvas unsupported code goes here
}
</script>
<canvas id="canvasDiv" width="200" height="200"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Drawing Rectangles Example</title>
<style>
#bodyCanvas {
width: 400px;
height:200px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawRectangle(){
var canvas = document.getElementById('canvasDiv');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillRect(30,30,120,120);
ctx.clearRect(50,50,80,80);
ctx.strokeRect(55,55,70,70);
}
else
{
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>
</head>
<body id="bodyCanvas" onload="drawRectangle();">
<h2>Canvas Drawing Rectangles Example</h2>
<canvas id="canvasDiv"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Drawing Paths Example</title>
<style>
#bodyCanvas {
width: 500px;
height:200px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawPaths(){
var canvas = document.getElementById('canvasDiv');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
}
else
{
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>
</head>
<body id="bodyCanvas" onload="drawPaths();">
<h2>Canvas Drawing Paths Example</h2>
<canvas id="canvasDiv"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Drawing Lines Example</title>
<style>
#bodyCanvas {
width: 500px;
height:200px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawLines(){
var canvas = document.getElementById('canvasDiv');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(125,25);
ctx.lineTo(25,125);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(145,145);
ctx.lineTo(145,45);
ctx.lineTo(45,145);
ctx.closePath();
ctx.stroke();
// Straight Line
ctx.beginPath();
ctx.moveTo(285,45);
ctx.lineTo(185,45);
ctx.closePath();
ctx.stroke();
}
else
{
alert('You need Safari or Firefox 1.5+ to see this example.');
}
}
</script>
</head>
<body id="bodyCanvas" onload="drawLines();">
<h2>Canvas Drawing Lines Example</h2>
<canvas id="canvasDiv"></canvas>
</body>
</html>