Path Methods on Canvas

Previous >    <Next  

‎متدهاي مسير ـPath Methods

‎متدهاي مسير درجدول زير همراه با لينك تشريح آنها.

‎متد مسير ‎شرح
beginPath() ‎شروع مسير جديد يا بازيابي مسيرجاري
closePath() ‎يك خط بمسير از نقطه فعلي تاشروع اضافه ميكند.
isPointInInPath() ‎درصورت نقطه مشخص شده درمسيرباشد،مقدارtrue رگشت ميشود .
moveTo() ‎مسير را به نقطه اي دربوم بدون ترسيم انتقال ميدهد.
lineTo() ‎يك خط به مسير اضافه ميكند.
fill() ‎مسير فعلي را پرميكند.
rect() ‎مستطيلي به مسير اضافه ميكند.
stroke() ‎مسير جاري راترسيم ميكند.
bezierCurveTo() ‎يك منحني درجه سوم بزيه به مسير اصافه ميكند.
arc() ‎يك قوس يامنحني‎)‎ دايره وياقسمتي از دايره‎‎رابه مسيراصافه ميكند
arcTo() ‎يك قوس يامنحني بين دومماس، به مسير اضافه ميكند.
quadraticCurvTo() ‎يك منحني درجه دوم بزيه به مسير اضافه ميكند.
<>

‎متد‎Path beginPath()‎‎

‎متد‎beginPath()‎‎ مسيري راشروع ويا مسيرجاري رابازيابي ميكند.

‎مثال ـ روي بوم يك مسير سبز ويك مسير بنفش ميكشد.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.lineWidth = 5

// Begin a Path
ctx.beginPath();
ctx.moveTo(0, 75);
ctx.lineTo(250, 75);

// Draw the Path
ctx.stroke();

// Begin a new Path
ctx.beginPath();
ctx.strokeStyle = "purple";
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);

// Draw the Path
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.beginPath()

‎اين متد هيچ مقدار برگشت نميدهد .همچنين بدون پارامتر ميباشد.

‎متدPath ‎closePath()‎‎

‎متد‎closePath()‎‎ مسيري را از نقطه فعلي تا نقطه شروع قبلي ايجاد ميكند .

‎از متد‎stroke()‎‎ يا‎fill()‎‎ براي ترسيم مسير استفاده كنيد .

‎مثال ـ مسيري به شكلL رسم ميشود ومسير با يك خط به نقطه شروع بسته ميشود .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

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

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.closePath()

‎اين متد داراي پارمتر ومقدار برگشتي نيست.

‎مثال ـ مسير رابا رنگ سياه پرميكند.

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.fill();

--(go to editor for change code and run)

‎متد‎Canvas isPointInPath()‎ ‎

‎متد‎isPointInPath()‎‎ براي بررسي وجود نقطه در مسير جاريست .اگر نقطه وجود داشته ‎باشد، برگشتي آنtrue است ودرغيراينصورت false

‎مثال ـ اگر نقطه‎(20,50)‎ در مسير جاري باشد، مستطيلي ترسيم ميشود .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(20, 20, 150, 100);
if  (ctx.isPointInPath(20, 50)) {
 ctx.stroke();

--(go to editor for change code and run)

‎توجه ـ درمسير بودن نقطه درمسيرجاري، همان درمحدوه عنصر بوم است.

‎فرمت استفادهSytax

context.isPointInPath(x,y)

‎مقادير پارامترها ـParameter Values

‎پارامتر ‎شرح
x ‎مختصاتx نقطه براي كنترل
y ‎مختصاتy نقطه براي كنترل

‎متدCanvas moveTo()‎

‎متد‎moveTo()‎‎ مسير را بدون ترسيم خط به نقطه مشخصي انتقال ميدهد .

‎مثال ـ با شروع مسير به نقطه‎(0,0)‎ رفته و خطي به موقعيت ‎(300,150)‎ ‎ترسيم ميشود.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Draw the Path
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفادهSytax

context.moveTo(x,y)

‎مقادير پارامترها ـParameter Values

‎پارامتر ‎شرح
x ‎مختصاتx نقطه ايكه بايد انتقال يابد
y ‎مختصاتy نقطه ايكه بايد انتقال يابد
< id="lineTo" name="lineTo">

‎متدCanvas lineTo()‎

‎متد‎llineTo()‎‎ خطي از نقطه قبلي به نقطه جاري به مسير اضافه مينمايد .

‎از متد هاي‎stroke()‎‎ يا‎fill()‎‎ براي ترسيم مسير استفاده نمائيد .

‎مثال ـ شروع مسير، انتقال به نقطه‎(0,0)‎ وايجاد خط تانقطه ‎(300,150)‎ 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Draw the Path
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفادهSytax

context.lineTo(x,y)

‎مقادير پارامترها ـParameter Values

‎پارامتر ‎شرح
x ‎مختصاتx نقطه ايكه بايد باآن خط ايجاد شود
y ‎مختصاتy نقطه ايكه بايد با آن خط ايجاد شود.

‎مثال ـ ترسيم مسيرL مانند. 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

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

--(go to editor for change code and run)

‎متدCanvas fill()‎

‎متد‎fill()‎‎ مسير جاري را پر ميكند .ويژگي ‎fillStyle‎ شئ context ‎رنگ پركردن مسير رامشخص ميكند .اگر مشخص نشده باشد ،پيش فرض آن رنگ‎000000#‎ ‎ميباشد‎(solid black)‎ .

‎متد فوق مسير را قبل از پركردن آن مانند متد‎closePath()‎‎ مي بندد .

‎مثال ـ ترسيم مستطيل‎150*100‎ وپركردن آن بارنگ قرمز 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.fill()

‎متد بدون پارامتر ميباشد.

‎متدCanvas rect()‎

‎متد‎rect()‎‎ مستطيلي را به مسير اضافه ميكند .

‎مثال ـ ترسيم مستطيل‎150*100‎ پيكسل 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.rect(x,y,width,height)

‎مقادير پارامترها ـParameter Values

‎پارامتر ‎شرح
x ‎مختصاتx گوشه سمت چپ بالاي مستطيل
y ‎مختصاتy گوشه سمت چپ بالائي مستطيل
width ‎عرض مستطيل برحسب پيكسل
height ‎ارتفاع مستطيل برحسب پيكسل

‎مثال ـ ايجاد سه مستطيل با متد‎rect()‎‎ 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();

// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();

--(go to editor for change code and run)

‎متدCanvas stroke()‎

‎متد‎stroke()‎‎ مسير جاري راترسيم ميكند .مقدار پيش فرض ‎strokeStyle‎ ‎براي ترسيم متد مذكور ،رنگ‎000000#‎ است ‎(solid black)‎ .

‎مثال ـ يك مسير شكلL را بارنگ قرمز ترسيم ميكند .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = "red";
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.stroke()

‎متد بدون پارامتر وبدون مقدار برگشتي است.

‎متدCanvas bezierCurveTO()‎

‎متد‎bezierCurveTO()‎‎ يك منحني به مسير اضافه ميكند .اين منحني با نقاط كنترلي ‎كه در متد داده ميشود، منحني بزيه درجه سه خواهد داشت .براي ترسيم مسير از متدهاي ‎storke()‎‎يا‎fill()‎‎ استفاده نمائيد .

‎مثال ـ ترسيم منحني بزيه درجه سه

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

--(go to editor for change code and run)

‎يك منحني درجه سه بزيه به سه نقطه نيازدارد .دونقطه اول آن كنـترلي هستند، كه درمحاسبات ‎درجه سوم بزيه استفاده ميشوند .آخرين نقطه ، نقطه پاياني براي منحني است .نقطه شروع منحني ‎آخرين نقطه درمسيرفعلي است.اگر مسيري وجود ندارد، ازمتدهاي‎beginePath()‎‎ و ‎moveTo()‎‎براي شروع استفاده كنيد .

A cubic bezier curve

‎نقاط شكل براي منحني بزيه درجه سه بصورت زيراست:

  • ‎moveTo(‎20,20‎)‎نقطه شروع
  • ‎bezierCurveTo(‎20,100‎,200,100,200,20)‎ـ نقطه كنترلي اول
  • ‎bezierCurveTo(20,100,‎200,100‎,200,20)‎ـ نقطه كنترلي دوم
  • ‎bezierCurveTo(20,100,200,100,‎200,20‎)‎ـ نقطه پاياني

‎فرمت استفاده ـSyntax

context.bezierCurveTo(cp1x,cp1ycp2x,cp2y,x,y)

‎مقادير پارامتر ـParamete Values

‎پارامتر ‎شرح
cp1x ‎نقطه كنترلي يك مختصاتx
cp1y ‎نقطه كنترلي يك مختصاتy
cp2x ‎نقطه كنترلي دوم مختصاتx
cp2y ‎نقطه كنترلي دوم مختصاتy
x ‎نقطه پاياني مختصاتx
y ‎نقطه پاياني مختصاتy

‎متد ـCanvas arc()‎

‎متد‎arc()‎‎ يك قوس يا منحني به مسير اضافه ميكند .اين متد دايره يا قسمتي ازآنرا ‎به مسير اضافه ميكند.

‎از متد هاي‎stroke()‎‎ يا‎fill()‎‎ براي ترسيم مسير استفاده نمائيد .

‎مثال ـ ايجاد يك دايره

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

--(go to editor for change code and run)

‎براي قسمتي از دايره درتصوير زير ، در تنظيم آن براي متد‎arc()‎‎ موارد را دنبال ‎ميكنيم.

An arc
  • ‎arc(‎100,75‎,50,0*Math.PI,1.5*Math.PI)‎ـ مركز دايره
  • ‎arc(100,75,‎50‎,0*Math.PI,1.5*Math.PI)‎ـ شعاع دايره
  • ‎arc(100,75,50,‎0*Math.PI‎,1.5*Math.PI)‎ـ زاويه شروع
  • ‎arc(100,75,50,0*Math.PI,‎1.5*Math.PI‎)‎ـ زاويه پايان

‎فرمت استفاده ـSyntax

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

‎مقادير پارامتر ـParameter Values

‎پارامتر ‎شرح
x ‎مركز دايره مختصاتx
y ‎مركز دايره مختصاتy
r ‎شعاع دايره
sAngle ‎زوايه شروع
eAngle ‎زاويه پايان
counterclockwise ‎اختياري ـ جهت ترسيم را مشخص ميكند.
true‎ـ جهت حركت ساعت
false‎ـ پيش فرض ، خلاف جهت حركت ساعت

‎مثال ـ ترسيم يك دايره نارنجي

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();

--(go to editor for change code and run)

‎متد ـCanvas arcTo()‎

‎متد‎arcTo()‎‎ يك قوس‎/‎ منحني بين دو مماس به مسيراضافه ميكند.

‎از متد هاي‎stroke()‎‎ يا‎fill()‎‎ براي ترسيم مسير استفاده نمائيد .

‎مثال ـ يك كمان بين دومماس روي بوم ايجاد ميكند.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);

// Draw the path
ctx.stroke();

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

context.arcTo(x1,y1,x2,y2,r)

‎مقادير پارامتر ـParameter Values

‎پارامتر ‎شرح
x1 ‎نقطه شروع منحني مختصاتx
y1 ‎نقطه شروع منحني مختصاتy
x2 ‎نقطه پايان منحني مختصاتx
y2 ‎نقطه پايان منحني مختصاتy
r ‎شعاع منحني كه قسمتي از دايره است

‎مثال ـ ايجاد قوسي بين دو مماس وپركردن آن

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);

// Fill and draw the path
ctx.fill();

--(go to editor for change code and run)

‎متدCanvas quadraticCurveTo()‎

‎متد‎quadraticCurveTo()‎‎ بااستفاده از نقاط كنترلي كه منحني درجه دوم بزيه را ‎نشان ميدهند، يك منحني به مسيرفعلي اضافه ميكند.

‎از متد هاي‎stroke()‎‎ يا‎fill()‎‎ براي ترسيم مسير استفاده نمائيد .

‎مثال ـ رسم منحني درجه دوم بزيه

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();

--(go to editor for change code and run)

‎يك منحني درجه دوم بزيه به دو نقطه نياز دارد .نقطه اول بك نقطه كنترلي است كه درمحاسبه بزيه ‎درجه دوم استفاده ميشود.، ونقطه دوم نقطه پايان منحني است .نقطه شروع منحني آخرين نقطه در ‎مسي فعلي است .اگر مسيري وجود ندارد، از متدهاي‎beginPth()‎‎ و ‎moveTo‎ ‎براي تعريف نقطه شروع استفاده كنيد.

A quadratic Bézier curve

‎نقاط مربوطه در ترسيم منحني بزيه از تصوير مطابق زيرند:

  • ‎moveTo(‎20,20‎)‎ـ نقطه شروع
  • ‎quadraticCurveTo(‎20,100‎,200,20)‎ـ نقطه كنترلي
  • ‎quadraticCurveTo(20,100,‎200,20‎)‎ـ نقطه پاياني

‎فرمت استفاده ـSyntax

context.quadraticCurveTo(cpx,cpy,x,y)

‎مقادير پارامترها ـParameter Values

‎پارامتر ‎شرح
cpx ‎نقطه كنترلي مختصاتx
cpy ‎نقطه كنترلي مختصاتy
x ‎نقطه پاياني مختصاتx
y ‎نقطه پاياني مختصاتy
Previous >    <Next