ایچ تی ام ال کانواس شکل

مثال

مثال 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

آپ خود سجاوٹ کریئٹ کریئن

نقاشی خطوط کانواس

خطوط با استفاده از مسیرهای کانواس نقاشی می‌شوند:

روش

beginPath() روش شروع یک مسیر جدید است. آن هیچ چیزی را نقاشی نمی‌کند، فقط یک مسیر جدید تعریف می‌کند.

moveTo() تعریف نقطه‌ای برای شروع خط است. آن هیچ چیزی را نقاشی نمی‌کند، فقط یک نقطه شروع تنظیم می‌کند.

lineTo() روش تعریف نقطه‌ای برای پایان خط است. آن هیچ چیزی را نقاشی نمی‌کند، فقط یک نقطه پایان تنظیم می‌کند.

stroke() روش واقعاً خط‌ها را نقاشی می‌کند. رنگ پیش‌فرض خط، سیاه است.

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

مثال 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

آپ خود سجاوٹ کریئٹ کریئن

مثال 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

آپ خود سجاوٹ کریئٹ کریئن

توضیحات

اگر می‌خواهید مستطیل نقاشی کنید، نباید 4 خط را نقاشی کنید.

در فصل بعدی، شما یاد خواهید گرفت که از drawRect() روش برای نقاشی مستطیل.

ویژگی strokeStyle

strokeStyle ویژگی‌ها در کانواس در حال نقاشی تعریف می‌شوند.

باید قبل از stroke() قبل از روش استفاده از آن تنظیم کنید.

مثال

ctx.beginPath();
// تعریف مستطیل
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// تعریف مثلث
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

آپ خود سجاوٹ کریئٹ کریئن

دوسرے بار بھی دیکھئے:

کدوو3 سی کام کا پورا کانواس مراجع منصوب