پیشنهاد دوره:

روش Canvas closePath()

تعریف و استفاده closePath()

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

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

مثال‌ها

مثال 1

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

مرورگر شما پشتیبانی از تگ HTML5 canvas را ندارد.

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 canvas را ندارد.

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

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