HTML Canvas ড্রাইং
- পূর্ববর্তী পৃষ্ঠা Canvas বিবরণ
- পরবর্তী পৃষ্ঠা Canvas কোর্ডিনেট
কাভাসে জাভাস্ক্রিপ্ট দিয়ে ড্রাইং
HTML কাভাসের সকল ড্রাইংকে জাভাস্ক্রিপ্ট দিয়ে করতে হবে:
উদাহরণ
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
পদ ১: কাভাস এলিমেন্ট খুঁজা
প্রথমে, আপনাকে <canvas> এলিমেন্টটি খুঁজতে হবে。
এটা HTML DOM পদ্ধতি getElementById() দিয়ে করা হয়:
const canvas = document.getElementById("myCanvas");
পদ ২: ড্রাইং অবজেক্ট তৈরি করা
একইসঙ্গে, আপনাকে একটি কাভাস ড্রাইং অবজেক্ট প্রয়োজন হবে。
getContext() একটি অন্তর্নিহিত HTML অবজেক্ট, যা ড্রাইং করার জন্য বৈশিষ্ট্য ও পদ্ধতি প্রদান করে:
const ctx = canvas.getContext("2d");
পদ ৩: কাভাসে ড্রাইং
শেষপর্যন্ত, আপনি কাভাসে ড্রাইং করতে পারবেন。
ড্রাইং অবজেক্টের পূর্ণপক্ষ শৈলীকে লাল রঙে সজ্জিত করা হয়:
ctx.fillStyle = "#FF0000";
fillStyle বৈশিষ্ট্যটি হতে পারে CSS রঙ, গ্রেডেন্ট বা মোটিফ।ডিফল্ট ফিলস্টাইল হল কালো রঙ。
fillRect(x,y,width,height) মথকে একটি চতুর্ভুজ আঁকা হয়, fillStyle শৈলী দিয়ে পূর্ণপক্ষে আঁকা হয়:
ctx.fillRect(0, 0, 150, 75);
অন্যান্য দেখুন:
- পূর্ববর্তী পৃষ্ঠা Canvas বিবরণ
- পরবর্তী পৃষ্ঠা Canvas কোর্ডিনেট
