HTML-এ canvas ট্যাগ গ্রাফিক্স আঁকতে ব্যবহৃত হয়। গ্রাফিক্স আঁকতে স্ক্রিপ্ট ব্যবহার করতে হয়। এই ট্যাগ HTML5-এ معرفی করা হয়েছে। প্রতিটি ক্যানভাসের দুটি এলিমেন্ট থাকে যা ক্যানভাসের উচ্চতা এবং প্রস্থ বর্ণনা করে: height এবং width।
নিচের অ্যাট্রিবিউটগুলো আছে:
- height − পিক্সেলে ক্যানভাসের উচ্চতা
- width − পিক্সেলে ক্যানভাসের প্রস্থ
এখন HTML-এ canvas ট্যাগ ইমপ্লিমেন্ট করার একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.shadowBlur = 20; ctx.shadowColor = "black"; ctx.fillStyle = "green"; ctx.fillRect(40, 40, 100, 250); ctx.shadowBlur = 30; ctx.shadowColor = "blue"; ctx.fillStyle = "orange"; ctx.fillRect(200, 40, 200, 150); </script> </body> </html>
আউটপুট
এখন HTML5-এ কোড্রেটিক কার্ভ আঁকার আরেকটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE HTML> <html> <head> <style> #test { width − 100px; height −100px; margin − 0px auto; } </style> <script type> function drawShape() { // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext) { // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
আউটপুট
