پاک کردن قسمتی از تصویر در تگ کانواس اچ تی ام ال

برای پاک کردن قسمتی از تصویر در تگ کانواس اچ تی ام ال، می‌توانید از دو روش زیر استفاده کنید:

۱- استفاده از CSS:

با استفاده از CSS می‌توانید بخش مورد نظر را با تغییر مقدار background-color به رنگ پس‌زمینه صفحه پوشانده و از دید کاربر پنهان کنید.

برای مثال، فرض کنید قصد پنهان کردن قسمتی از تصویر با طول ۲۰۰ پیکسل و عرض ۱۰۰ پیکسل دارید، می‌توانید این کد CSS را به تگ کانواس اچ تی ام ال اضافه کنید:

canvas { position: relative; }

canvas::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 200px; height: 100px; background-color: white; }

در این کد، با استفاده از پراپرتی‌های position و z-index، ابتدا تگ کانواس را به صورت نسبی قرار می‌دهیم، سپس یک عنصر جدید با استفاده از پراپرتی content و display به تگ کانواس اضافه می‌کنیم. سپس با استفاده از پراپرتی‌های position، top، left، width و height، اندازه و موقعیت عنصر جدید را تنظیم می‌کنیم. در نهایت، با تنظیم background-color به رنگ سفید، بخش مدنظر را پوشانده و از دید کاربر پنهان می‌کنیم.

۲- استفاده از JavaScript:

در روش دوم، با استفاده از JavaScript می‌توانید به صورت دقیق قسمت مورد نظر را پاک کنید.

برای مثال، فرض کنید قصد پاک کردن قسمتی از تصویر با طول ۲۰۰ پیکسل و عرض ۱۰۰ پیکسل دارید، می‌توانید این کد JavaScript را به تگ کانواس اچ تی ام ال اضافه کنید:

var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); context.clearRect(0, 0, 200, 100);

در این کد، ابتدا با استفاده از متد querySelector تگ کانواس را انتخاب کرده و سپس با استفاده از getContext، شیء context را از کانواس دریافت می‌کنیم. در نهایت، با استفاده از متد clearRect و تنظیم مقدار x، y، width و height، قسمت مدنظر را پاک می‌کنیم.