توصیه‌های درسی:

روش HTML canvas closePath()

تعریف و کاربرد closePath()

توضیح:از روشی برای ترسیم مسیر دقیق روی کانواس استفاده کنید. روشی برای ایجاد مسیر از نقطه فعلی به نقطه شروع ایجاد می‌کند. stroke()

توضیح:از روشی برای ترسیم مسیر دقیق روی کانواس استفاده کنید. fill() از روشی برای پر کردن تصویر استفاده کنید ( پیش‌فرض سیاه است). لطفاً از fillStyle برای پر کردن یک رنگ/تدرج دیگری از ویژگی‌ها استفاده کنید.

مثال‌ها

مثال 1

یک مسیر را ترسیم کنید که به شکل حرف L است، سپس خطوط را برای بازگشت به نقطه شروع ترسیم کنید:

موزیع وب شما از تگ کانواس HTML5 پشتیبانی نمی‌کند.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

آزمایش کنید

توضیح:مثال‌های بیشتری در پایین صفحه ارائه شده است.

قوانین و کاربردها

context.closePath();

مثال‌های بیشتر

مثال 2

سبز را به عنوان رنگ پرکن استفاده کنید:

موزیع وب شما از تگ کانواس HTML5 پشتیبانی نمی‌کند.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

آزمایش کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری است که از این ویژگی کامل پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

توجه:برنامه‌های Internet Explorer 8 و قدیمی‌تر از عنصر <canvas> پشتیبانی نمی‌کنند.