Canvas Other Methods

‎متدهاي ديگر بوم ـCanvas Other Methods

‎در صفحات قبلي در مورد ويژگي ومتدهاي شئ بوم‎(<canvas>)‎ كاملا مطالبي جامع ‎ارائه گرديد .اين آخرين صفحه ايست كه درارتباط ميباشد .دراين صفحه چند متد بعنوان ساير ‎متدهاي بوم ارائه مي شود .بخشهاي تشريحي هركدام از آنها در جدول زير مشخص شده است.

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

‎متدCanvas clip()‎

‎متد‎clip‎ يك ناحيه با هراندازه اي را از شئcontext انتخاب‎(clip)‎ ‎ميكند.

‎مثال ـ ناحيه‎200*120‎ از شئ context مربوطه انتخاب ميشود .سپس مستطيل قرمز ترسيم ‎ميگردد .فقط قسمتي از مستطيل قرمز كه داخل ناحيه بريده شده است، قابل مشاهده است.

Without clip(): -

With clip(): -

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

// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();

// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script >

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

context.clip()

‎متد فوق بدون مقدار برگشتي

‎متدCanvas save()‎

‎متد‎save()‎‎ وضعيت شئcontext را با تمام ويژگي هاي آن ذخيره ميكند. ‎وضعيت و ويژگي ها مطابق زيرند:

• clipping
• transformation
• direction
• fillStyle
• font
• globalAlpha
• globalCompositeOperation
• imageSmoothingEnabled
• lineCap
• lineDashOffset
• lineJoin
• lineWidth
• miterLimit
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• strokeStyle
• textAlign
• textBaseline

‎مثال ـ وضعيت و ويژگي هاي شئcontext را ذخيره ميكند .

// Draw
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);

// Save the state
ctx.save();

// Draw new
ctx.fillStyle = "red";
ctx.fillRect(100, 10, 50, 50);

// Restore saved state
ctx.restore();

// Draw new
ctx.fillRect(200, 10, 50, 50);

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

context.save()

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

‎متدCanvas restore()‎

‎متد‎restore()‎‎ وضعيت ذخيره شده يك شئ context را بازيابي ميكند .پارامترهاي ‎بازيابي شده همانهائي هستند، كه در متد‎save()‎‎ مطرح شد .

‎مثال ـ وضعيت وويژگي هاي ذخيره شئcontext بازيابي ميشود .

// Draw
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);

// Save the state
ctx.save();

// Draw new
ctx.fillStyle = "red";
ctx.fillRect(100, 10, 50, 50);

// Restore saved state
ctx.restore();

// Draw new
ctx.fillRect(200, 10, 50, 50);

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

context.restore()

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

‎متدHTML DOM Document createEvent()‎

‎متد‎createEvent()‎‎ يك شئ رويدادي ‎(event object)‎ ايجاد ميكند . ‎رويداد بايد ازنوع قابل قبول ويا قانوني باشد وقبل از استفاده بايد مقدار دهي اوليه ‎(Dipatch)‎شود .

‎مثال ـ شبيه سازي يك رويداد ماوس‎(mouseover event)‎

const ev = document.createEvent("MouseEvent");
ev.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

document.getElementById("myDiv").dispatchEvent(ev);

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

document createEvent(type)