Jassif Team Institution

HTML Canvas Reference

<canvas> উপাদানটি একটি HTML পৃষ্ঠায় একটি বিটম্যাপ এলাকা নির্ধারণ করে।

ক্যানভাস এপিআই জাভাস্ক্রিপ্টকে ক্যানভাসে গ্রাফিক্স আঁকার অনুমতি দেয়।

ক্যানভাস এপিআই রঙ, ঘূর্ণন, স্বচ্ছতা এবং অন্যান্য পিক্সেল ম্যানিপুলেশন সহ আকার, রেখা, বক্ররেখা, বাক্স, পাঠ্য এবং চিত্র আঁকতে পারে।

আপনি <canvas> ট্যাগ সহ একটি HTML পৃষ্ঠার যেকোনো জায়গায় একটি ক্যানভাস উপাদান যোগ করতে পারেন:

<canvas id="myCanvas" width="300" height="150"></canvas>

আপনি HTML DOM পদ্ধতি getElementById() দিয়ে একটি <canvas> উপাদান অ্যাক্সেস করতে পারেন।

ক্যানভাসে আঁকার জন্য, আপনাকে একটি 2D পরিবেশ বস্তু তৈরি করতে হবে:

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

Drawing on the Canvas

আপনি একটি 2D পরিবেশ তৈরি করার পরে, আপনি ক্যানভাসে আঁকতে পারেন।

fillRect() পদ্ধতিটি 20,20 অবস্থানে উপরের-বাম কোণে একটি কালো আয়তক্ষেত্র আঁকে। আয়তক্ষেত্রটি 150 পিক্সেল চওড়া এবং 100 পিক্সেল উচ্চ।

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);

Using Colors

fillStyle বৈশিষ্ট্য অঙ্কন বস্তুর পূরণ রং সেট করে:

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

আপনি document.createElement() পদ্ধতির সাহায্যে একটি নতুন <canvas> উপাদান তৈরি করতে পারেন এবং একটি বিদ্যমান HTML পৃষ্ঠায় উপাদানটি যোগ করতে পারেন:

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Paths

ক্যানভাসে আঁকার একটি সাধারণ উপায় হল:

শুরুর পথ - beginPath()
একটি বিন্দুতে যান - moveTo()
পথে আঁকা - লাইন টু()
পথ আঁকুন - স্ট্রোক()

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Complete Canvas API Reference

এই রেফারেন্সটি ক্যানভাসে টেক্সট, লাইন, বাক্স, বৃত্ত, ছবি ইত্যাদি আঁকতে ব্যবহৃত getContext("2d") অবজেক্টের সমস্ত বৈশিষ্ট্য এবং পদ্ধতি কভার করে।

Drawing Methods

ক্যানভাসে সরাসরি আঁকার জন্য শুধুমাত্র 3টি পদ্ধতি রয়েছে:

Path Methods

Circles and Curves

Text

Colors, Styles, and Shadows

Transformations

Image Drawing

The ImageData Object / Pixel Manipulation

Compositing

Other Methods

Standard Properties and Events

ক্যানভাস অবজেক্ট স্ট্যাটিক বৈশিষ্ট্য এবং ঘটনা সমর্থন করে।

Related Pages

Canvas tutorial: Canvas Tutorial

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag

Browser Support

<canvas> উপাদানটি একটি HTML5 মান (2014)।

ক্যানভাস API সমস্ত আধুনিক ব্রাউজারে সমর্থিত:

Exercises