برمجة HTML5 Canvas API

<script type = "text/javaScript">

يحاول

{

document.createElement ("canvas"). getContext ("2d") ؛

document.getElementById ("دعم"). innerhtml = "ok" ؛

}

الصيد (ه)

{

document.getElementById ("دعم"). innerhtml = e.message ؛

}

</script>

// احصل على عنصر القماش وسياق الرسم var canvas = document.getElementById ("Diagonal") ؛

var context = canvas.getContext ("2d") ؛

// إنشاء مسار مع إحداثيات مطلقة

context.beginPath () ؛

context.moveto (70 ، 140) ؛

context.lineto (140 ، 70) ؛

// ارسم هذا الخط على قماش

سياق. ضربة () ؛

يمكن تحقيق نفس الآثار المذكورة أعلاه من خلال التحول (التحجيم ، الترجمة ، الدوران) ، إلخ.

ارسم الخطوط القطرية عن طريق التحول

// احصل على عنصر القماش وسياق الرسم الخاص به

var canvas = document.getElementById ("diagonal") ؛

var context = canvas.getContext ("2d") ؛

// احفظ حالة الرسم الحالية

context.save () ؛

// انقل سياق الرسم إلى أسفل اليمين

context.translate (70 ، 140) ؛

// ارسم الجزء نفسه مثل الخط السابق مع أصل نقطة البداية

context.beginPath () ؛

context.moveto (0 ، 0) ؛

context.lineto (70 ، -70) ؛

context.stroke () ؛ </p> <p> context.restore () ؛

تمثل المسارات في API HTML5 Canvas أي شكل ترغب في تقديمه.

BeginPath (): بغض النظر عن نوع الرسم البياني الذي تبدأ في الرسم ، فإن أول شيء تحتاج إلى الاتصال به هو BeginPath. لا تأخذ هذه الوظيفة البسيطة أي معلمات وتستخدم لإخطار القماش بأنها على وشك البدء في رسم رسم بياني جديد.

Moveto (x ، y): لا رسم ، انقل الموضع الحالي إلى الإحداثيات الهدف الجديدة (x ، y).

Lineto (x ، y): لا ينقل الموضع الحالي إلى الإحداثيات الهدف الجديدة (x ، y) فحسب ، بل يرسم أيضًا خطًا مستقيمًا بين الإحداثيين.

Closepath (): تتصرف هذه الوظيفة إلى حد كبير مثل LineTo. الفرق الوحيد هو أن ClosePath سيستخدم تلقائيًا إحداثيات البدء للمسار كإحداثي الهدف. كما أنه يُبلغ القماش بأن الرقم المرسوم حاليًا قد تم إغلاقه أو شكل مساحة مغلقة بالكامل ، وهو مفيد جدًا للملفات والسكتات الدماغية المستقبلية.

ارسم مظلة شجرة الصنوبر

وظيفة CreateCanopypath (سياق) {

// ارسم مظلة الشجرة

context.beginpath () ؛ </p> <p> context.moveto (-25 ، -50) ؛

context.lineto (-10 ، -80) ؛

context.lineto (-20 ، -80) ؛

context.lineto (-5 ، -110) ؛

context.lineto (-15 ، -110) ؛ </p> <p> // Vertex للشجرة

context.lineto (0 ، -140) ؛ </p> <p> context.lineto (15 ، -110) ؛

context.lineto (5 ، -110) ؛

context.lineto (20 ، -80) ؛

context.lineto (10 ، -80) ؛

context.lineto (25 ، -50) ؛

// قم بتوصيل نقطة البداية وأغلق المسار

context.closepath () ؛

} </p> <p> drawTrails () {

var canvas = document.getElementById ('diagonal') ؛

var context = canvas.getContext ('2d') ؛ </p> <p> context.save () ؛

context.translate (130 ، 250) ؛ </p> <p> // قم بإنشاء مسار يعبر عن المظلة

CreateCanopypath (سياق) ؛ </p> <p> // ارسم المسار الحالي

سياق. ضربة () ؛

context.restore () ؛

} </p> <p> window.adDeventListener ("load" ، drawTrails ، true) ؛

يسمح وضع السكتة الدماغية للمظلة أن تبدو أكثر واقعية.

// خطوط واسعة

context.linewidth = 4 ؛

// نقطة تقاطع المسار السلس

context.linejoin = 'Round' ؛

//لون

context.strokestyle = '#663300' ؛

// ارسم المسار الحالي

سياق. ضربة () ؛

نضيف جذوع إلى الشجرة

context.save () ؛

context.translate (-10 ، 350) ؛

context.beginpath () ؛ </p> <p> // ينحني المنحنى الأول إلى الجزء العلوي اليمين

context.moveto (0 ، 0) ؛

context.quadraticCurveto (170 ، -50 ، 260 ، -190) ؛ </p> <p> // bend إلى أسفل اليمين

context.quadraticCurveto (310 ، -250 ، 410 ، -250) ؛ </p> <p> // ارسم المسار في ضربة بنية واسعة

context.strokestyle = '#663300' ؛

context.linewidth = 20 ؛

context.stroke () ؛ </p> <p> // استعادة حالة اللوحة السابقة

context.restore () ؛

يجب أن تنتظر حتى يتم تحميل الصورة بالكامل قبل تشغيلها. عادةً ما يقوم المتصفحات بتحميل الصور بشكل غير متزامن عند تنفيذ البرنامج النصي للصفحة. إذا حاولت تقديم الصورة إلى قماش قبل تحميلها بالكامل ، فلن تعرض القماش أي صور. لذلك ، إيلاء اهتمام خاص للتأكد من تحميل الصورة قبل التقديم.

// تحميل الصورة

var bark = new image () ؛

bark.src = "bark.jpg" ؛ </p> <p> // بعد تحميل الصورة ، اتصل بوظيفة الرسم

bark.onload = function () {

drawTrails () ؛

}

إظهار الصور:

يتطلب استخدام التدرجات ثلاث خطوات:

(1) إنشاء كائن التدرج

(2) تعيين لون للكائنات التدرج وإشارة إلى طريقة الانتقال

(3) تعيين التدرجات لأنماط التعبئة أو أنماط السكتة الدماغية على السياق

// قم بإنشاء تدرج أفقي من الدرجة الثالثة يتم استخدامه كملمس جذع

var trunkgradient = context.createlineargradient (-5 ، -50 ، 5 ، -50) ؛ </p> <p> // الحافة اليسرى للجذع ذات اللون البني المتوسط

trunkgradient.addcolorstop (0 ، '#663300') ؛ </p> <p> // هناك بعض الألوان للحديث عنها في منتصف جذع الشجرة الأيسر

trunkgradient.addcolorstop (0.4 ، '#996600') ؛ </p> <p> // يجب أن يكون لون الحافة اليمنى أغمق

trunkgradient.addcolorstop (1 ، '#552200') ؛ </p> <p> // املأ الجذع مع التدرجات

context.fillStyle = trunkgradient ؛

context.fillRect (-5 ، -50 ، 10 ، 50) ؛

// قم بإنشاء تدرج عمودي لإسقاط المظلة على الجذع

var canopyshadow = context.createlineargradient (0 ، -50 ، 0 ، 0) ؛

// نقطة الانطلاق لتدرج الإسقاط أسود مع شفافية 50 ٪

canopyshadow.addcolorstop (0 ، 'rgba (0 ، 0 ، 0 ، 0.5)') ؛

// الاتجاه هبوطًا رأسيًا ، ويتغير التدرج بسرعة إلى شفافة تمامًا خلال مسافة قصيرة جدًا ، خارج هذا الطول

// لا يوجد أي إسقاط على جذع الشجرة

canopyshadow.addcolorstop (0.2 ، 'RGBA (0 ، 0 ، 0 ، 0.0)') ؛ </p> // املأ تدرج الإسقاط على الجذع

context.fillStyle = canopyshadow ؛

context.fillRect (-5 ، -50 ، 10 ، 50) ؛

// تحميل الصورة

var gravel = new image () ؛

gravel.src = "gravel.jpg" ؛

gravel.onload = function () {

drawTrails () ؛

} </p> <p> // استبدل الخطوط السميكة البنية مع صور الخلفية

context.strokestyle = context.createpattern (الحصى ، "كرر") ؛

context.linewidth = 20 ؛

سياق. ضربة () ؛

المعلمة الثانية للسياق. الإرهاب هي العلامة القابلة للتكرار ، ويمكن تحديد القيمة المناسبة في الجدول 2-1.

سياق وظيفة التحجيم. عندما تعرض كل معلمة صورة ، فإنها تمر إليها كمية الصورة المراد توسيعها (أو مخفضة) على محور هذا الاتجاه. إذا كانت قيمة X 2 ، فهذا يعني أن جميع العناصر في الصورة المرسومة ستصبح عريضة. إذا كانت قيمة Y 0.5 ، فستصبح الصورة المرسومة نصف الارتفاع.

// ارسم الشجرة الأولى عند x = 130 ، y = 250

context.save () ؛

context.translate (130 ، 250) ؛

DrawTree (السياق) ؛

context.restore () ؛ </p> <p> // ارسم الشجرة الثانية عند x = 260 ، y = 500

context.save () ؛

context.translate (260 ، 500) ؛ </p> <p> // التكبير في ارتفاع وعرض الشجرة الثانية إلى ضعف الأصل

context.scale (2 ، 2) ؛

DrawTree (السياق) ؛

context.restore () ؛

تدوير الصورة

context.save () ؛

// معلمات زاوية الدوران في راديان كوحدات

context.rotate (1.57) ؛

context.drawImage (myimage ، 0 ، 0 ، 100 ، 100) ؛ </p> <p> context.restore () ؛

طريقة لاستخدام التحول

// حفظ الحالة الحالية

context.save () ؛ </p> <p> // تزداد قيمة x مع زيادة قيمة Y. بمساعدة تحول الشد ،

// يمكن أن تخلق شجرة مائلة تستخدم كظل

// بعد تطبيق التحول ، يتم ضرب جميع الإحداثيات مع المصفوفة

context.transform (1 ، 0 ،

-0.5 ، 1 ،

، 0) ؛ </p> <p> // في اتجاه المحور ص ، قم بتغيير ارتفاع الظل إلى 60 ٪

سياق.

context.fillStyle = 'rgba (0 ، 0 ، 0 ، 0.2)' ؛

context.fillRect (-5 ، -50 ، 10 ، 50) ؛ </p> <p> // إعادة إعادة الشجرة مع تأثير الظل الموجود

CreateCanopypath (سياق) ؛

context.fill () ؛ </p> <p> // استعادة حالة اللوحة السابقة

context.restore () ؛

Context.FillText (Text ، X ، Y ، MaxWidth): محتوى نص نصي ، x ، y يحدد موضع النص ، maxwidth هو معلمة اختيارية ، يحد من موضع النص.

Context.Stroketext (Text ، X ، Y ، MaxWidth): محتوى النص النصية ، x ، y يحدد موضع النص ، maxwidth هو معلمة اختيارية ، يحد من موضع النص.

// ارسم النص على قماش

Context.save () ؛ </p> <p> // حجم الخط 60 ، الخط

context.font = "60px Impact" ؛ </p> <p> // ملء اللون

context.fillStyle = '#996600' ؛

//مركز

context.textalign = 'center' ؛ </p> <p> // ارسم النص

Context.FillText ('Happy Trails!' ، 200 ، 60 ، 400) ؛

context.restore () ؛

يمكن التحكم في الظلال من خلال العديد من خصائص السياق العالمي

// اللون الأسود ، 20 ٪ شفافية

context.shadowcolor = 'rgba (0 ، 0 ، 0 ، 0.2)' ؛ </p> <p> // انقل 15 بكسل إلى اليمين و 10 بكسل إلى اليسار

context.shadowoffsetx = 15 ؛

context.shadowoffsety = -10 ؛ </p> <p> // ظل غير واضحة قليلاً

context.shadowblur = 2 ؛

context.getimagedata (SX ، SY ، SW ، SH): SX ، XY يحدد نقطة ، SW: العرض ، SH: الارتفاع.

تقوم هذه الوظيفة بإرجاع ثلاث خصائص: عرض عدد البكسلات لكل صف في صف كبير البكسل لكل عمود

البيانات مجموعة من المصفوفات التي تحتوي على قيم RGBA (القيم الحمراء والأخضر والأزرق والشفافية) لكل بكسل تم الحصول عليها من قماش.

Context.Putimagedata (Imagedata ، DX ، DY): يسمح للمطورين بالمرور في مجموعة من بيانات الصورة. يتم استخدام DX ، DY لتحديد الإزاحة. إذا تم استخدامه ، فستقفز الوظيفة إلى موضع قماش محدد للتحديث

يعرض بيانات البكسل الواردة.

canvas.todataurl: يمكن الحصول على البيانات المعروضة حاليًا على القماش برمجيًا. يتم حفظ البيانات التي تم الحصول عليها بتنسيق النص ، ويمكن للمتصفح تحليلها في صورة.