خطوط Canvas HTML

مثال

// کانواس ایجاد می‌شود:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// یک مسیر جدید تعریف می‌شود:
ctx.beginPath();
// نقطه شروع تعریف می‌شود:
ctx.moveTo(0, 0);
// نقطه پایان تعریف می‌شود:
ctx.lineTo(200, 100);
// نقاشی:
ctx.stroke();

آزمایش کنید

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

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

روش

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

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

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

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

ویژگی lineWidth

ویژگی lineWidth پهنای خطی مورد استفاده در نقاشی روی کانواس را تعریف می‌کند.

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

مثال

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

آزمایش کنید

ویژگی strokeStyle

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

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

مثال

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

آزمایش کنید

ویژگی lineCap

ویژگی lineCap استایل انتهای خط (butt،round یا square) را تعریف می‌کند.

پیش‌فرض مربعی (سکویه) است.

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

مثال

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

آزمایش کنید

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

دستورالعمل کامل Canvas در CodeW3C.com