ترسیم Canvas HTML
- صفحه قبل مقدمه Canvas
- صفحه بعدی مختصات Canvas
طراحی بر روی کanvas با استفاده از JavaScript
تمام طراحیهای انجام شده بر روی کanvas باید با استفاده از JavaScript انجام شوند:
مثال
<script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </script>
مرحله 1: پیدا کردن عنصر Canvas
ابتدا، باید عنصر <canvas> را پیدا کنید.
این کار با استفاده از روش getElementById() از HTML DOM انجام میشود:
const canvas = document.getElementById("myCanvas");
مرحله 2: ایجاد شیء طراحی
در ادامه، شما نیاز به یک شیء کanvas برای طراحی دارید.
getContext() یک شیء داخلی HTML است که ویژگیها و روشهای مورد استفاده برای طراحی را فراهم میکند:
const ctx = canvas.getContext("2d");
مرحله 3: طراحی بر روی کanvas
در نهایت، میتوانید بر روی کanvas طراحی کنید.
سبک پر کردن شمارهگذاری را به قرمز تنظیم کنید:
ctx.fillStyle = "#FF0000";
ویژگی fillStyle میتواند رنگ CSS، محدوده رنگ یا الگو باشد. سبک پیشفرض fillStyle سیاه است.
fillRect(x,y,width,height) روشی است که یک مستطیل را بر روی کanvas میکشد، با استفاده از سبک پر کردن پر میشود:
ctx.fillRect(0, 0, 150, 75);
لطفاً به: مراجعه کنید
- صفحه قبل مقدمه Canvas
- صفحه بعدی مختصات Canvas