HTML DOM Canvas অবজেক্ট
Canvas API 允许 JavaScript 在画布上绘制图形。
Canvas API 可以绘制形状、线条、曲线、方框、文本和图像,以及颜色、旋转、透明度和其他像素操作。
将 Canvas 添加到 HTML
您可以使用
উদাহরণ
如何访问 Canvas 元素
您可以使用 HTML DOM 方法 getElementById() 访问
const myCanvas = document.getElementById("myCanvas");
কাভাসে আঁকার জন্য, আপনি 2D কনটেক্সট ওবজেক্ট তৈরি করতে হবে:
const ctx = myCanvas.getContext("2d");
নোট
HTML <canvas> এলিমেন্টটি নিজেই আঁকার সাধারণ পদ্ধতি (মথু) নেই
আপনি কোনওভাবেই জাভাস্ক্রিপ্ট ব্যবহার করেই কোনওভাবেই গ্রাফিক্স আঁকতে পারবেন
getContext() মথুর মাধ্যমে একটি প্রক্রিয়াকরণ ওবজেক্ট ফিরিয়ে দেয়, যা আঁকার সাধারণ পদ্ধতি (মথু) সহ যুক্ত
কাভাসে আঁকা
2D কনটেক্সট ওবজেক্ট তৈরি করার পর, আপনি কাভাসে আঁকতে পারবেন
নিচের fillRect() মথুর মাধ্যমে কালো চতুর্ভুজ আঁকা হয়েছে, যার উপরিভুজ অবস্থান 20,20-এ। এই চতুর্ভুজটির প্রস্থ 150 পিক্সেল, উচ্চতা 100 পিক্সেল
উদাহরণ
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillRect(20, 20, 150, 100);
রঙ ব্যবহার করুন
fillStyle প্রকৃতি গ্রহণ করুন
উদাহরণ
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
আপনি আরও document.createElement() মথুর মাধ্যমে একটি নতুন <canvas> এলিমেন্ট তৈরি করতে পারেন এবং তা স্থাপিত হলের একটি হালকা পৃষ্ঠায় যোগ করুন:
উদাহরণ
const myCanvas = document.createElement("canvas"); document.body.appendChild(myCanvas); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
পথ
কাভাসে আঁকার সাধারণ পদ্ধতি হল:
- পথ শুরু করুন - beginPath()
- একটি পথে যান - moveTo()
- পথে আঁকুন - lineTo()
- পথ দ্রব্যাস - stroke()
উদাহরণ
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();
রঙ, শৈলী এবং ছাড়াছাড়া শৃঙ্গরস্ত্র
এক্সপ্রোপ্রিয়ন | বর্ণনা |
---|---|
fillStyle | ছাড়াছাড়া পূর্ণাঙ্গ রঙ, অস্পষ্টতা বা প্যাটার্ন সংযোজন করুন বা ফিরিয়ে দিন |
strokeStyle | ছাড়াছাড়া লাইনগুলির রঙ, অস্পষ্টতা বা প্যাটার্ন সংযোজন করুন বা ফিরিয়ে দিন |
shadowColor | ছাড়াছাড়া শৃঙ্গরস্ত্রের রঙ সংযোজন করুন বা ফিরিয়ে দিন |
shadowBlur | ছাড়াছাড়া শৃঙ্গরস্ত্রকে অস্পষ্টতা স্তর সংযোজন করুন বা ফিরিয়ে দিন |
shadowOffsetX | 设置或返回阴影到形状的水平距离。 |
shadowOffsetY | 设置或返回阴影到形状的垂直距离。 |
পদ্ধতি | বর্ণনা |
---|---|
createLinearGradient() | 创建线性渐变(用于画布内容)。 |
createPattern() | 在指定方向重复指定的元素。 |
createRadialGradient() | 创建径向/圆形渐变(用于画布内容)。 |
addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
এক্সপ্রোপ্রিয়ন | বর্ণনা |
---|---|
lineCap | 设置或返回线的端盖样式。 |
lineJoin | 设置或返回两条线相交时创建的角的类型。 |
lineWidth | 设置或返回当前线宽。 |
miterLimit | 设置或返回最大斜接长度。 |
矩形
পদ্ধতি | বর্ণনা |
---|---|
rect() | 创建矩形。 |
fillRect() | 绘制“填充的”矩形。 |
strokeRect() | 绘制矩形(无填充)。 |
clearRect() | নির্দিষ্ট ক্ষেত্রের ভিতরের নির্দিষ্ট পিক্সেলগুলো মুছে দিন |
পথ
পদ্ধতি | বর্ণনা |
---|---|
fill() | বর্তমান গ্রাফিককে পূর্ণ করুন (পথ) |
stroke() | একটি পথকে একটি পথ হিসাবে স্ক্রিনে প্রদর্শন করুন |
beginPath() | পথটি শুরু করুন কিংবা বর্তমান পথকে পুনরায় নির্ধারণ করুন |
moveTo() | পথটি কাভের নির্দিষ্ট স্থানে সরিয়ে নিন, কিন্তু কোনও লাইন তৈরি করবে না |
closePath() | বর্তমান পয়েন্ট থেকে শুরু করে কাভকে কাভের প্রাথমিক পয়েন্টে ফিরিয়ে দিন |
lineTo() | নতুন একটি পয়েন্ট যোগ করুন এবং সেই পয়েন্ট থেকে কাভের সর্বশেষ নির্দিষ্ট পয়েন্টে একটি লাইন তৈরি করুন |
clip() | মৌলিক কাভ কাভের অন্তর্গত যে কোনও আকৃতির ও কাঠামোর ক্ষেত্রটি কাটে |
quadraticCurveTo() | একটি দু-পয়েন্ট বেজেল কার্ভ তৈরি করুন |
bezierCurveTo() | একটি তিন-পয়েন্ট বেজেল কার্ভ তৈরি করুন |
arc() | একটি বৃত্তাকার/গোলাকার আর্ক/কার্ভ তৈরি করুন (যার মাধ্যমে বৃত্ত বা বৃত্তের একটি অংশ তৈরি করা হয়) |
arcTo() | দুটি ট্রান্সফরমেশনের মধ্যে একটি বৃত্তাকার/গোলাকার আর্ক/কার্ভ তৈরি করুন |
isPointInPath() | যদি নির্দিষ্ট পয়েন্ট বর্তমান পথে থাকে, তবে true ফিরান, না তবে false |
ট্রান্সফরম
পদ্ধতি | বর্ণনা |
---|---|
scale() | বর্তমান গ্রাফিককে বৃদ্ধি কিংবা হ্রাস করুন |
rotate() | বর্তমান গ্রাফিককে ঘুরিয়ে দিন |
translate() | রেখাপ্রক্ষেপণের (0,0) স্থানটি পুনরায় ম্যাপ করুন。 |
transform() | ড্রাইংয়ের বর্তমান ট্রান্সফরমেশন ম্যাট্রিক্সকে প্রতিস্থাপন করুন。 |
setTransform() | বর্তমান ট্রান্সফরমেশনটি একটি ইউনিট ম্যাট্রিক্সে পুনরায় নির্ধারণ করুন। তারপরে transform()。 |
টেক্সট
এক্সপ্রোপ্রিয়ন | বর্ণনা |
---|---|
font | নির্ধারণ কিংবা প্রত্যাহার টেক্সট কনটেন্টের বর্তমান ফন্ট বৈশিষ্ট্য。 |
textAlign | নির্ধারণ কিংবা প্রত্যাহার টেক্সট কনটেন্টের বর্তমান বানান পদ্ধতি。 |
textBaseline | লিখিত চিত্রকে চিত্রিত করার সময় ব্যবহৃত টেক্সট বেসলাইন সেট করা বা ফিরিয়ে দেয় |
পদ্ধতি | বর্ণনা |
---|---|
fillText() | ক্যানভাসের উপর “ফিল্লিং” লিখিত চিত্রকে চিত্রিত করা |
strokeText() | ক্যানভাসের উপর লিখিত চিত্রকে (ফিল্লিং না) চিত্রিত করা |
measureText() | নির্দিষ্ট লিখিত চিত্রকে চিত্রকে চিত্রকে ফিরিয়ে দেয় |
চিত্র চিত্রিতকরণ
পদ্ধতি | বর্ণনা |
---|---|
drawImage() | ক্যানভাসের উপর চিত্র, ক্যানভাস বা ভিডিও চিত্রিত করা |
পিক্সেল অপারেশন
এক্সপ্রোপ্রিয়ন | বর্ণনা |
---|---|
width | ImageData অবজেক্টের প্রশস্ততা ফিরিয়ে দেয় |
height | ImageData অবজেক্টের উচ্চতা ফিরিয়ে দেয় |
data | ইমেজডেটা অবজেক্টের চিত্র তথ্য ধারণকারী অবজেক্ট ফিরিয়ে দেয় |
পদ্ধতি | বর্ণনা |
---|---|
createImageData() | নতুন কালীন ImageData অবজেক্ট সৃষ্টি করে |
getImageData() | ImageData অবজেক্টকে ফিরিয়ে দেয়, যা ক্যানভাসের নির্দিষ্ট রঙচিহ্নকে কপি করে |
putImageData() | চিত্রকে ইমেজডেটা অবজেক্টের প্রকাশ্য তথ্যকে ক্যানভাসে ফিরিয়ে দেয় |
সংমিশ্রণ
এক্সপ্রোপ্রিয়ন | বর্ণনা |
---|---|
globalAlpha | চিত্রকে দ্বারা চিত্রকে দ্বারা আবার্তিত করার এলপা বা স্বচ্ছতা মান সেট করা বা ফিরিয়ে দেয় |
globalCompositeOperation | নতুন চিত্রকে বর্তমান চিত্রে কীভাবে আবার্তিত করবে সেট করা বা ফিরিয়ে দেয় |
অন্যান্য
পদ্ধতি | বর্ণনা |
---|---|
save() | বর্তমান কনটেক্স্টের অবস্থা সংরক্ষিত করে |
restore() | পূর্ববর্তী সংরক্ষিত পথ অবস্থা এবং এক্সপ্রোপ্রিয়ন ফিরিয়ে দেয় |
createEvent() | |
getContext() | |
toDataURL() |
এক্সপ্রোপ্রিয়ন এবং ইভেন্ট
canvas অবজেক্ট এক্সপ্রোপ্রিয়ন এবং ইভেন্টকে সমর্থন করেএক্সপ্রোপ্রিয়নএবংইভেন্ট。
সংশ্লিষ্ট পৃষ্ঠা
HTML পড়াশোনা:HTML5 ক্যানভাস
HTML ইমেজ পড়াশোনা:HTML Canvas পড়াশোনা
HTML রেফারেন্স ম্যানুয়েল:HTML <canvas> ট্যাগ