This translation is incomplete. Please help translate this article from English.
<canvas> এলিমেন্ট
<canvas> বিষয়ে আমাদের আজকের টিউটোরিয়াল চলুন শুরু করা যাক।
<canvas id="tutorial" width="150" height="150"></canvas>
এটি অনেকটা <img> element এর মত, শুধু পার্থক্য হল এটির src এবং alt এট্রিবিউট নেই । <canvas> element এর মাত্র দুইটা এট্রিবিউট আছে - width এবং height - দুটোই ঐচ্ছিক এবং DOM প্রোপার্টি ব্যবহার করে নির্ধারণ করা যায় । যখন কোন width এবং height বৈশিষ্ট্য উল্লেখ করা হয় না, canvas স্বয়ংক্রিয়ভাবেই 300 pixels দৈর্ঘ্যের এবং 150 pixels উচ্চতার হয়ে যাবে । এই element কে CSS দ্বারা যেকোন আকারে/সাইজে তৈরি করা যেতে পারে, কিন্তু রেন্ডারিং সময় এটার লে-আউট এ যেন ফিট হতে পারে সেভাবেই একে দেখানো হয়।
খেয়াল করুন: যদি রেন্ডারিং করার সময় কোন সমস্যা হয়, CSS ব্যবহার না করে সরাসরি <canvas> এর width এবং height এট্রিবিউট ব্যবহার করুন।
id অ্যাট্রিবিউট <canvas> এলিমেন্ট-বিষয়ক কোন এট্রিবিউট না, প্রায় সব HTML এলিমেন্টেই এই এট্রিবিউট দেওয়া যায় (class এট্রিবিউটের মত)। সবসময় ক্যানভাস এলিমেন্টে id এট্রিবিউট দেওয়া ভাল, কারণ তাহলে স্ক্রিপ্ট থেকে সহজেই এই এলিমেন্ট নিয়ন্ত্রণ করা যাবে।<canvas> element অন্য যেকোন ছবির মতই স্টাইল করা যাবে ( মার্জিন, সীমানা, ব্যাকগ্রাউন্ড ইত্যাদি)। কিন্তু, এই নিয়ম, canvas রেন্ডারিং করার সময় কোন প্রভাব ফেলে না । এটা কিভাবে করা যায় এই টিউটোরিয়ালে পরে আমরা দেখতে পাবো । কোন স্টাইলিং দেওয়া না হলে ক্যানভাস পুরাপুরি স্বচ্ছ ভাবে রেন্ডার করা হবে।
ফলব্যাক কন্টেন্ট
যেহেতু কিছু পুরোনো ব্রাউজারে (যেমন ইন্টারনেট এক্সপ্লোরার ৯ এর আগের সংস্করণ) <canvas> সমর্থন করা হয় না, তাই ঐসব ব্রাউজারের জন্য ফলব্যাক কন্টেন্ট ব্যবহার করতে হবে।
<canvas> সমর্থন করে না তারা শুধু ভিতরের fallback কন্টেন্ট রেন্ডার করবে। যেসব ব্রাউজার <canvas> সমর্থন করে তারা ভিতরের কন্টেন্ট উপেক্ষা করবে এবং শুধুমাত্র ক্যানভাস রেন্ডার করবে ।<canvas> সমর্থন করে না তারা শুধু <canvas> ট্যাগের ভেতরের কন্টেন্ট গুলোই দেখাবে। কিছুটা এইরকম :
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
প্রয়োজনীয় </ canvas> ট্যাগ
<img> এলিমেন্টে কোন ক্লোজিং ট্যাগ লাগে না। কিন্তু <canvas> এলিমেন্টের জন্য ক্লোজিং ট্যাগ (</canvas>) লাগবে।
খেয়াল করুন: অ্যাপল এর সাফারি ব্রাউজারের প্রথম সংস্করণ ক্লোজিং ট্যাগের প্রয়োজন বোধ না করলেও ,স্পেসিফিকেশন অনুযায়ী এখন আপনাকে ক্লোজিং ট্যাগ দিতে হবে, যাতে সব ব্রাউজারেই আপনার কোড ঠিকমত চলে। আপনি যদি মাস্ক CSS ট্রিকস ব্যবহার করে মাস্ক না করেন তাহলে তাহলে সাফারির (পূর্ব সংস্করণ 2.0 এর আগের) সংস্করণে ক্যানভাস নিজেই fallback কন্টেন্ট আর ক্যানভাস - দুটিকেই রেন্ডার করবে। সৌভাগ্যবশত, সাফারির এই সংস্করণ ব্যবহারকারীরা আজকাল বিরল।
<canvas id="foo" ...></canvas> কোড দিয়েই সব ব্রাউজারে (যারা ক্যানভাস সমর্থন করে) সাপোর্ট দিতে পারবেন।রেন্ডারিং কনটেক্সট
<canvas> creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context ("experimental-webgl") based on OpenGL ES.
The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d".
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.
Checking for support
The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
A skeleton template
Here is a minimalistic template, which we'll be using as a starting point for later examples.
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
The script includes a function called draw(), which is executed once the page finishes loading; this is done by using the load event on the document. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.
Here's what the template looks like in action:
A simple example
To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
This example looks like this:
| Screenshot | Live sample |
|---|---|
 |