خطوط 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