ترسیم Canvas HTML

طراحی بر روی ک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 در CodeW3C.com