شکل‌های کanvas HTML

مثال

مثال 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();

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();

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();

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();

ctx.stroke();

آموزش خود را امتحان کنید

لطفاً به: مراجعه کنید