لوحة الرسم لـ HTML
تقدم HTML canvas وظائف أكثر برمجية، وتناسب معالجة البكسل، التدرج الديناميكي، ورسم البيانات الكبيرة.
ما هو HTML Canvas
يستخدم tag HTML5 <canvas> لرسم الرسومات بشكل ديناميكي عبر السكربت (عادةً JavaScript).
لكن، لا يمتلك عنصر <canvas> وظائف رسم خاصة به (إنه مجرد وحدة تخزين للرسومات) - يجب استخدام السكربت لرسم الرسومات الفعلية.
يعود method "getContext()" إلى object يقدم طرقًا وخصائصًا لرسم على الرسام.
سيعرض هذا المقال خصائص ومتغيرات object "getContext("2d")"، والتي يمكن استخدامها لرسم النصوص، الخطوط، المربعات، الدوائر، إلخ على الرسام.
دعم المتصفحات
IEFirefoxOperaChromeSafari
يدعم Internet Explorer 9 وFirefox وOpera وChrome وSafari خصائص ومتغيرات <canvas>.
ملاحظة:Internet Explorer 8 وأقدم إصدارات IE لا تدعم عنصر <canvas>.
اللون والنمط والظل
| خصائص | وصف |
| fillStyle | تعيين أو العودة إلى اللون أو التدرج أو النمط المستخدم في الملء. |
| strokeStyle | تعيين أو العودة إلى اللون أو التدرج أو النمط المستخدم في خط. |
| shadowColor | تعيين أو العودة إلى اللون المستخدم في الظل. |
| shadowBlur | تعيين أو العودة إلى مستوى الغموض المستخدم في الظل. |
| shadowOffsetX | تعيين أو العودة إلى المسافة الأفقية بين الظل والشكل. |
| shadowOffsetY | تعيين أو العودة إلى المسافة العمودية بين الظل والشكل. |
نمط الخط
| خصائص | وصف |
| lineCap | يُضبط أو يُعيد نوع نهاية الخط. |
| lineJoin | يُضبط أو يُعيد نوع الزاوية المُصنوعة عند تقاطع الخطوط. |
| lineWidth | يُضبط أو يُعيد عرض الخط الحالي. |
| miterLimit | يُضبط أو يُعيد طول الزاوية القصوى للميل. |
المربع
المسار
| طريقة | وصف |
| fill() | يُعبأ الرسم الحالي (المسار). |
| stroke() | يُرسم المسار المحدد. |
| beginPath() | يبدأ مسارًا جديدًا أو يُعيد المسار الحالي إلى حالة البداية. |
| moveTo() | يُحرك المسار إلى النقطة المحددة في اللوحة دون إنشاء خط. |
| closePath() | يُصنع مسارًا من النقطة الحالية إلى النقطة البدائية. |
| lineTo() | يُضيف نقطة جديدة ويُصنع خطًا من هذه النقطة إلى النقطة المحددة في اللوحة. |
| clip() | يُقص أي شكل و حجم من اللوحة الأصلية. |
| quadraticCurveTo() | يُصنع منحنى بيزيرو ثانوي. |
| bezierCurveTo() | يُصنع منحنى بيزيرو ثالث. |
| arc() | يُصنع دائرة/مسار (لإنشاء دائرة أو جزء من الدائرة). |
| arcTo() | يُصنع دائرة/مسار بين قطعتين. |
| isPointInPath() | يعود بـ true إذا كان النقطة المحددة موجودة في المسار الحالي، وإلا يعود بـ false. |
التحويل
النص
| خصائص | وصف |
| font | يُضبط أو يُعيد خصائص الخط الحالية المستخدمة في نص المحتوى. |
| textAlign | يُضبط أو يُعيد الطريقة الحالية للتنسق المستخدمة في نص المحتوى. |
| textBaseline | يُضبط أو يُعيد النص الحالي للخط الأساسي المستخدم في رسم النص. |
رسم الصور
| طريقة | وصف |
| drawImage() | يُرسم الصور على اللوحة، اللوحة أو الفيديو. |
عمليات معالجة البكسل
| خصائص | وصف |
| width | العودة إلى العرض لـ Object ImageData. |
| height | العودة إلى الارتفاع لـ Object ImageData. |
| بيانات | العودة إلى Object يحتوي على بيانات الصورة من Object ImageData المحدد. |
| طريقة | وصف |
| createImageData() | إنشاء Object ImageData جديد وفراغي. |
| getImageData() | العودة إلى Object ImageData، الذي يحتوي على بيانات البكسل المكررة من المربع المحدد على لوحة الرسم. |
| putImageData() | وضع بيانات الصورة (من Object ImageData المحدد) على لوحة الرسم. |
الدمج
| خصائص | وصف |
| globalAlpha | تعيين أو العودة إلى القيمة الحالية لـ alpha أو الشفافية في الرسم. |
| globalCompositeOperation | تعيين أو العودة إلى كيفية رسم الصورة الجديدة على الصورة الموجودة مسبقًا. |
آخر
| طريقة | وصف |
| save() | حفظ حالة البيئة الحالية. |
| restore() | عودة إلى الحالة والخصائص التي تم حفظها مسبقًا للطريق. |
| createEvent() | |
| getContext() | |
| toDataURL() | |