<script type = "text/javaScript">
يحاول
{
document.createElement ("canvas"). getContext ("2d") ؛
document.getElementById ("دعم"). innerhtml = "ok" ؛
}
الصيد (ه)
{
document.getElementById ("دعم"). innerhtml = e.message ؛
}
</script>
انضم إلى قماش <canvas id = النمط القطري = الحدود: 1 بكسل الأزرق الصلب ؛ العرض = 200 ارتفاع = 200/>// احصل على عنصر القماش وسياق الرسم 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.fillStyle = #339900 ؛ context.fill () ؛ ارسم المستطيلنضيف جذوع إلى الشجرة
context.fillStyle = '#663300' ؛ context.fillRect (-5 ، -50 ، 10 ، 50) ؛ منحنى رسم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 | ببلاغة مسطحة أفقية |
| كرر y | البلاط المسطح الرأسي |
| عدم التكرار | يتم عرض الصورة مرة واحدة فقط ، وليس مبلطة |
سياق وظيفة التحجيم. عندما تعرض كل معلمة صورة ، فإنها تمر إليها كمية الصورة المراد توسيعها (أو مخفضة) على محور هذا الاتجاه. إذا كانت قيمة 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 () ؛
الظليمكن التحكم في الظلال من خلال العديد من خصائص السياق العالمي
| ملكية | قيمة | ملاحظة |
| ShadowColor | قيم الألوان في أي CSS | يمكن استخدام الشفافية (ألفا) |
| Shadowoffsetx | قيمة بكسل | القيمة إيجابية ، حرك الظل إلى اليمين ؛ إنه سلبي ، حرك الظل إلى اليسار |
| Shadowoffsety | قيمة بكسل | القيمة إيجابية ، حرك الظل لأسفل. إنه سلبي ، حرك الظل لأعلى |
| Shadowblur | غاوسي قيمة غامضة | كلما زادت القيمة ، زادت ضبابية حواف الظلال |
// اللون الأسود ، 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: يمكن الحصول على البيانات المعروضة حاليًا على القماش برمجيًا. يتم حفظ البيانات التي تم الحصول عليها بتنسيق النص ، ويمكن للمتصفح تحليلها في صورة.