Color, Stlye and shadow Methods on Canvas

Previous >    <Next  

‎متد و ويژگي هاي رنگ، استايل وسايه درCanvas

‎متد و ويژگي هاي رنگ ، استايل وسايه روي اشياء، شئ دو بعديcontext براي اعمال رنگ ،استايل ‎وسايه درترسيم روي بوم فعال ميباشند .يعني متد و ويژگي هاي مندرج در جدول زير ، مربوط به شئ ‎دوبعديcontext بوده كه دراعمال رنگ ، استايل وسايه در ترسيم روي عنصر بوم نقش دارند .

‎متد يا ويژگي ‎شرح
addColorStop() ‎رنگ ها و موقعيت توقف را در يك شئ گراديان مشخص ميكند.
createLinearGradient() ‎براي استفاده در محتوي بوم، يك گراديان خطي ايجاد ميكند.
createPattern() ‎يك عنصر مشخص شده را در يك جهت معين ، تكرار ميكند.
createRadialGradient() ‎يك گراديان شعاعي‎/‎ دايره اي،ايجاد ميكند‎).‎براي استفاده در محتوي ‎بوم‎(‎
fillStyle ‎رنگ، گراديان والگوي مورد استفاده براي پركردن نقاشي راتنظيم ويا برگشت ميدهد.
lineCap ‎سبك سرپوشهاي انتهائي يك خط را تنظيم ويابرگشت ميدهد.
lineJoin ‎وقتي دو خط به هم وصل ميشوند، نوع گوشه اتصال راتنظيم ويابرگشت ميدهد.
lineWidth ‎عرض خط فعلي را تنظيم ويا برگشت ميدهد.
miterLimit ‎حد اكثر طول ميتر‎(miter)‎ رابرگشت ويا تنظيم ميكند .
shadowBlur ‎سطح تاري سايه ها را تنظيم ويابرگشت ميدهد.
shadowColor ‎رنگ را براي استفاده در سايه ها را تنظيم ويابرگشت ميدهد.
shadowOffsetX ‎فاصله افقي سايه را از شكل ، تنظيم ويا برگشت ميدهد.
shadowOffsetY ‎فاصله عمودي سايه را از شكل ، تنظيم ويا برگشت ميدهد.
strokeStyle ‎رنگ ، گراديان ويا الگو را براي ترسيم، تنطيم ويا برگشت ميدهد.

‎متدCanvas addColorStop()‎

‎متد‎addColorStop()‎‎ براي شئ گراديان، رنگ و موقعيت را مشخص ميكند.متد فوق ‎همراه با اشياء گراديان خطي و شعاعي استفاده ميشود.

‎مثال ـ رنگ گرادياني ازسياه به سفيد براي استفاده دريك مستطيل تعريف ميكند.

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

// Create a Gradient
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");

// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);

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

‎براي مشاهده رنگ گرادياني بايد يك رنگ توقف اضافه نمائيد.

‎به مراحل ايجاد اين تصوير توجه كنيد:

  1. ‎شئcanvas بادسترسي به عنصر‎<canvas>‎ باid="myCanvas‎"‎ايجاد ميشود .
  2. ‎روي شئcanvas فوق، شئ دوبعدي ctx ايجاد ميشود .
  3. ‎روي شئctx شئ گراديان خطي grd ايجاد ميشود .
  4. ‎درنهايت روي شئgrd متدها وويژگي بعدي براي ترسيم شكل نهائي انجام ميشود، كه درمثال مشخص
  5. ‎ميباشد.

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

gradient>.addColorStop(stop,color)

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

‎پارامتر ‎شرح
stop ‎مقداري بين‎0‎ و‎. 1‎ موقعيتي بين شروع وپايان گراديان
color ‎رنگ پاياني در موقعيت توقف.

‎مثال ـ گرادياني با چندين متد‎addColorStop()‎‎ 

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

const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop("0.3", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("0.6", "green");
grd.addColorStop("0.8", "yellow");
grd.addColorStop(1, "red");

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

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

‎متدCanvas createPattern()‎

‎متد‎createPattern()‎‎ عنصر مشخصي را درجهت معين تكرار مي نمايد .عنصر مورد ‎ميتواند تصوير، ويدئو يا عناصر ديگر‎<canvas>‎ باشد.

‎عنصر تكرار را ميتوان براي پركردن مستطيل، دايره، خط وغيره استفاده كرد.

‎مثال ـ تكرار تصوير لامپ بصورت افقي وعمودي

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

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

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

context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat")

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

‎پارامتر ‎شرح
image ‎تصوير، بوم ويا عنصرويدئو را براي الگوي تكرار مشحص ميكند.
repeat ‎پيش فرض ـ الگوي تكرار براي افقي وعموديست
repeat-x ‎الگوي تكرار براي حالت فقط افقي
repeat-y ‎الگوي تكرار فقط براي عموديست.
no-repeat ‎الگو فقط يك بار نمايش ميشود وتكرار نميگردد

‎متدCanvas createLinearGradient()‎

‎متد‎ createLinearGradient()‎‎ يك شئ گراديان خطي ايجاد ميكند .شئ گراديان ‎ميتواند براي پركردن مستطيل ، دايره ، خط ، متن وغيره استفاده شود.

‎شئ گراديان ميتواند با مقدار دهي به ويژگيstrokStyle و fillStyle مورد استفاده قرار گيرد .

‎توجه ـ بايد يگ رنگ توقفي براي گراديان مشخص شود، تاقابل مشاهده با.شد.

‎مثال ـ گراياني ازچپ براست ازسياه به سفيد براي پركردن مستطيل

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

// Create Radial
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);

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

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

context.createRadialGradient(x0,y9,r0,x1,y1,r1)

‎مقادير پارامتر ـ ححشقشئثفثقV شمعثس

‎پارامتر ‎شرح
x0 ‎محتصات شروعx0 ـ گراديان دايره اي
y0 ‎محتصات شروعy0 ـ گراديان دايره اي
r0 ‎شعاع دايره ابتدائي
x1 ‎محتصات پايانx1 ـ گراديان دايره اي
y1 ‎محتصات پايانy1 ـ گراديان دايره اي
r1 ‎شعاع دايره انتهائي

‎ويژگيCanvas fillStyle

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

‎مثال ـ مقدار ويژگيfillSyle="red‎"‎براي پركردن مستطيل 

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

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

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

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

context.fillStyle=color|gradient|pattern

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

‎پارامتر ‎شرح
color ‎رنگ براي پر شدن نقاشي را نشان ميدهد .مقدار پيش فرض‎#000000‎
gradient ‎يك شئ گراديان براي پركردن نقاشي
pattern ‎يك شئ الگوئي براي پر نمودن ترسيم

‎مثال ـ تعريف گراديان از بالا به پائين براي پركردن مستطيل

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

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

‎مثال ـ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

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

‎مثال ـ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

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

‎ويژگيCanvas lineCap

‎ويژگي‎lineCap‎ سبك سرپوش هاي انتهائي يك خط را تنظيم ويا برگشت ميدهد.

‎مقادير قانوني آن مطابق زير:

  • butt‎ـ لب به لب كه پيش فرض است .
  • round‎ـ گرد
  • square‎ـ مربع

‎توجه ـ نوع مربع و گرد حطوط را كمي طولاني تر ميكنند.

‎مثال ـ خط با كالاهك انتهائي گرد(bdi>(round)‎ .

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

ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
ctx.stroke();

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

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

context.lineCap="butt|round|squre"

‎ويژگيCanva lineJoin

‎ويژگي‎lineJoin‎ نوع گوشه ايجاد شده را هنگاميكه دوخط به هم وصل ميشوند، تنظيم ‎ويا برگشت ميدهد .مقادير قابل قبولround و miter كه پيش فرض آن است .

‎توجه ـ مقدار‎"miter‎"‎تحت تاثير ويژگي miterLimit قرار ميگيرد .

‎مثال ـ نقطه برخورد دوخط درحالت گرد‎(round)‎ 

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

ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();

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

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

context.lineJoin="bevel|round|miter"

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
bevel ‎گوشه اريب
round ‎گوشه گرد
miter ‎گوشه تيز ـ پيش فرض

‎ويژگيCanvas lineWidth

‎ويژگي‎lineWidth‎ عرض خط جاري را تنظيم ويابرگشت ميدهد .مقدار آن برحسب ‎پيكسل ميباشد .مقدار پيش فرض آن‎1‎ است .

‎مثال ـ ترسيم خط باlineWidth=10 

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

// Begin a new Path
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);

// Draw the Path
ctx.stroke();

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

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

context.lineWidth=number

‎مثال ـ ترسيم يك مستطيل با خط عرض‎10‎ پيكسل 

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

ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100);

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

‎ويژگيCanvas miterLimit

‎ويژگي‎miterLimit‎ مقدار ماكريمم تيزي برخورد دو خط را تنظيم ويا برگشت ميده . ‎ويژگي فوق براي جلوگيري از طولاني شدن تيزي‎(miter)‎ استفاده ميشود مقدار پيش فرض ‎آن‎10 پيكسل است .

‎ويژگيmeterLimit هنگامي فعال است كه ويژگيlineJoin="meter‎"‎تنظيم شده باشد.

‎مثال ـ ترسيم خطوط با ماكزيمم تيزي برخورد‎5‎ پيكسلي 

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

ctx.lineWidth = 10;
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();

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

‎ويژگيCanvas shadowBlur

‎ويژگي‎shadowBlur‎ سطح تاري سايه هارا تنظيم يابرگشت ميدهد . مقدار پيش فرض ‎آن‎0‎ ميباشد .

‎مثال ـ ترسيم يك مستطيل با سايه سياه وسطح تاري‎20‎ 

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

ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);

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

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

context.shadowBlur=number

‎ويژگيCanvas shadowColor

‎ويژگي‎shadowColor‎ رنگ سايه تنظيم ويا برگشت ميدهد .

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

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

ctx.shadowBlur = 20;
ctx.shadowColor = "red";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);

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

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

context.shadowColor=color

‎ويژگيCanvas shadowOffsetX

‎ويژگي‎shadowOffsetX‎ فاصله افقي سايه را ازشكل تنظيم ويابرگشت ميدهد . ‎مقدار پيش فرض آن‎0‎ است .

‎مثال ـ يك مستطيل با سايه اي كه‎20‎ پيكسل به سمت راست قرار دارد، ميكشد .

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

ctx.shadowOffsetX = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);

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

‎جدول زير نمونه اي از مدار متفاوت اين ويژگي را بيان ميكند.

‎مقدار ‎شرح
0 ‎سايه درست پشت شكل است.
20 ‎سايه‎20‎ پيكسل بعد از سمت چپ شكل شروع ميشود.
-20 ‎سايه‎20‎ پيكسل قبل از سمت چپ شكل شروع ميشود .

‎روش استفاده ـSyntax

context.shadowOffsetX=number

‎ويژگيCanvas shadowOffsetY

‎ويژگي‎shadowOffsetY‎ فاصله عمودي سايه را ازشكل تنظيم ويابرگشت ميدهد. ‎مقدار پيش فرض آن‎0‎ است .

‎مثال ـ يك مستطيل با سايه اي كه‎20‎ پيكسل از بالا پائين تر از شكل قرار ‎دارد، كشيده ميشود.

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

ctx.shadowOffsetY = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);

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

‎جدول زير نمونه اي از مدار متفاوت اين ويژگي را بيان ميكند.

‎مقدار ‎شرح
0 ‎سايه درست پشت شكل است.
20 ‎سايه‎20‎ پيكسل ازبالا پائين تر از شكل شروع ميشود.
-20 ‎سايه‎20‎ پيكسل از بالاقبل از شكل شروع ميشود.

‎روش استفاده ـSyntax

context.shadowOffsetY=number

‎ويژگيCanvas strokeStyle

‎ويژگي‎strokeStyle‎ رنگ ، گراديان ، يا الگوي مورد استفاده استروك هارا تنظيم ‎ويابرگشت ميدهد .مقدار پيش فرض آن‎000000#‎ يعني رنگ سياهsolid است .

‎مثال ـ ترسيم يك مستطيل با ويژگيstrokeStyle="red‎"‎

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

ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100);

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

‎روش استفاده ـSyntax

context.strokeStyle=color|gradient|pattern

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح
color ‎رنگ استروك نقشه وياترسيم را مشخص ميكند .پيش فرض‎#000000‎
gradient ‎شئ گراديان خطي يا دايره اي كه براي استروك استفاده ميشود، نشان ميدهد.
pattern ‎شئ الگو‎(pattern)‎ كه براي استروك استفاده ميشود، نشان ميدهد .

‎مثال ـ ترسيم مستطيلي با گرادياني برايstrokeStyle 

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

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);

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

‎مثال ـ نوشتن متن‎"Big smile!‎"‎با گرادياني براي strokeStyle 

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);

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

Previous >    <Next