বিবরণ
ওয়েব পেজে ক্যানভাস আঁকতে, HTML5 canvas এলিমেন্ট ব্যবহার করুন। <canvas> এলিমেন্ট আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে গ্রাফিক্স আঁকতে দেয়। ক্যানভাস দিয়ে রেখা, রেক্ট্যাঙ্গেল, বেজিয়ার কার্ভ ইত্যাদি আঁকা যায়।
প্রতিটি ক্যানভাসের দুটি এলিমেন্ট থাকে যা ক্যানভাসের উঁচুতা এবং প্রস্থ বর্ণনা করে অর্থাৎ height এবং width।
সাথে ही, আপনাকে ক্যানভাসের জন্য একটি id সেট করতে হবে নিচের কোড স্নিপেটের মত:
<canvas id = "newCanvas" width = "100" height = "100"></canvas>
DOM-এ getElementById() মেথড ব্যবহার করে <canvas> এলিমেন্টটি খুঁজুন:
var canvas = document.getElementById("newCanvas");
ক্যানভাসে কিছু প্রদর্শন করতে, একটি স্ক্রিপ্টকে প্রথমে রেন্ডারিং কনটেক্সট অ্যাক্সেস করতে হবে এবং সেটিতে আঁকতে হবে। <canvas>-এর একটি DOM মেথড আছে যেটি getContext নামে ডাকা হয় রেন্ডারিং কনটেক্সট এবং এর ড্রইং ফাংশনগুলো পেতে। এই ফাংশনটি একটা প্যারামিটার নেয়, কনটেক্সট টাইপ 2d।
আইয়ে এখন <canvas> দিয়ে HTML5-এ পাথ আঁকার একটি উদাহরণ দেখি:
উদাহরণ ১: পাথ আঁকা
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; background-color: orange; } </style> <script> 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.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 demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </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>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
