HTML5 - Canvas वेबपेजवर चित्रकला
वेबपेजवर चित्रे व आकृत्या काढणे आता HTML5 - मधील Canvas सुविधेमुळे आता अगदी सोपे झाले आहे.
चौकोन काढणे -
खाली एक २००x२०० पिक्सेल आकाराचा चौरस काढण्याचा प्रोग्रॅम दिला आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Square</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#FF6699";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();
} </script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
प्रोग्रामचे वर्णन-
वेबपेजच्या head टॅगमध्ये जावास्क्रिप्टचा मुख्य प्रोग्राम आहे.व body मध्ये onLoad="init()"; या आज्ञेने तो कार्यान्वित केला आहे. body मध्ये canvas हे एलेमेंट असून त्यात canvas चा ID व लांबी व उंची दिली आहे. हा आपला ड्राईंग बोर्ड झाला.
जावास्क्रिप्ट फंक्शनमध्ये document.getElementById('canvas') वापरून त्याला ctx हे नाव दिले आहे. ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)canvas ला (2D) म्हण्जे फक्त दोनच परिमाणे लांबी व रुंदी आहेत. पुढील भागातील ओळींचा अर्थ सहज समजण्यासारखा आहे.वरील प्रोग्राममध्ये आवश्यक ते बदल करून पाहिजे त्या आकाराचा कोणताही त्रिकोण, चौकोन वा बहुभुजाकृती काढता येईल. त्याचा रंगही हवा तसा बदलता येईल.
वर्तुळ काढणे-
<html>
<head>
<title>HTML 5 Square</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#FF6699";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();
} </script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
प्रोग्रामचे वर्णन-
वेबपेजच्या head टॅगमध्ये जावास्क्रिप्टचा मुख्य प्रोग्राम आहे.व body मध्ये onLoad="init()"; या आज्ञेने तो कार्यान्वित केला आहे. body मध्ये canvas हे एलेमेंट असून त्यात canvas चा ID व लांबी व उंची दिली आहे. हा आपला ड्राईंग बोर्ड झाला.
जावास्क्रिप्ट फंक्शनमध्ये document.getElementById('canvas') वापरून त्याला ctx हे नाव दिले आहे. ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)canvas ला (2D) म्हण्जे फक्त दोनच परिमाणे लांबी व रुंदी आहेत. पुढील भागातील ओळींचा अर्थ सहज समजण्यासारखा आहे.वरील प्रोग्राममध्ये आवश्यक ते बदल करून पाहिजे त्या आकाराचा कोणताही त्रिकोण, चौकोन वा बहुभुजाकृती काढता येईल. त्याचा रंगही हवा तसा बदलता येईल.
वर्तुळ काढणे-
वर्तुळ काढण्यासाठी त्याच्या मध्यबिंदूचे सहगुणक व त्रिज्या देऊन पूर्ण वर्तुळासाठी रेडियनमध्ये कोन द्यावा लागतो. वरील प्रोग्राममध्ये खालीलप्रमाणे बदल करा.
ctx.fillStyle = "#336699";
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
आता ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)
रेष काढणे -
रंग न भरता साधी रेष काढायची असेल तर ctx.fillStyle आणि ctx.fill(); न वापरता फक्त ctx.stroke(); वापरावे लागते. त्याचे उदाहरण व चित्र खाली दिले आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Line</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.moveTo(50,50);
ctx.lineTo(300,150);
ctx.stroke();
}
</script>
</head> <body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
