Drawing Methods on canvas

‎سه متد ترسيمي مستقيم در رويCanvas وجود دارد .

‎متدCanvas ‎fillRect()‎‎

‎متد‎fillRect()‎‎ روي بوم مستطيلي توپر ترسيم ميكند .اين متد مسير جاري راتغيير ‎نمي دهد.

‎مقدار پيش فرض ويژگيfillStyle آن رنگ سياه ميباشد .

‎مثال ـ ترسيم مستطيل روي بوم

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

ctx.fillRect(20, 20, 150, 100);

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

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

‎دراين فرمت‎context‎ شئ زمينه دوبعدي است .

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

‎مثال ـ مستطيل با رنگ قرمز

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

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

‎متدCanvas ‎strokeRect()‎‎

‎متد‎strokeRect()‎‎ يك مستطيل توخالي روي بوم رسم ميكند .اين متد مسير جاري ‎را تغيير نميدهد.

‎مقدار پيش فرض ويژگيstrokeStyle برابر ‎#000000‎ بوده كه solid black است .

‎مثال ـ ترسيم مستطيل با متدstrokeRect

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

ctx.strokeRect(20, 20, 150, 100);

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

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

‎دراين فرمت‎context‎ شئ زمينه دوبعدي است .

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

‎متدCanvas ‎clearRect()‎‎

‎متد‎‎clearRect()‎‎‎ ناحيه مستطيلي مشخص در بوم راپاك ميكند .اين ‎مسيرجاري راتغيير نميدهد .ناحيه پاك شده رويrgba شفاف ‎(0,0,0,0)‎ تنظيم شده است .

‎مثال ـ متدclearRect

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

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 200, 100);
ctx.clearRect(40, 40, 50, 50);

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

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

‎دراين فرمت‎context‎ شئ زمينه دوبعدي است .

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