لتعلم القماش، يجب عليك أولاً معرفة كيفية رسم مقاطع خطية، وبعد ذلك يمكنك استخدام العديد من مقاطع الخطوط البسيطة لتحقيق رسومات أكثر تعقيدًا. على سبيل المثال، يتم تنفيذ المخططات الشائعة والمخططات الشريطية والمخططات الخطية وما إلى ذلك من خلال المقاطع الخطية.
المعرفة الأساسيةالمعرفة الأساسية بالقماش ليست كثيرة، فأنا أعرف بشكل أساسي كيفية رسم أجزاء الخطوط والرسومات والصور والنصوص وما إلى ذلك. يمكن رسم اللوحة القماشية في المتصفح، أو يمكن رسم صور بسيطة على خادم العقدة بمساعدة اللوحة القماشية. تسجل هذه المقالة الرسم في المتصفح فقط. أما بالنسبة لكيفية الرسم على جانب العقدة، فيمكنك التحقق من المعلومات ذات الصلة بنفسك.
للرسم في المتصفح، قم أولاً بتعريف عنصر اللوحة في HTML. العرض والارتفاع الافتراضيان هما 300 * 150، ويمكن ضبطهما حسب width height . لاحظ أن عرض وارتفاع نمط عنصر اللوحة القماشية وعرض وارتفاع لوحة الرسم القماشية ليسا نفس الشيء.
<canvas id=canvas> <p>المتصفح الحالي لا يدعم اللوحة، يرجى ترقية متصفحك</p></canvas>
قبل الرسم، يجب علينا أولاً الحصول على سياق سياق الرسم ثنائي الأبعاد للوحة القماشية الحالية، ومن ثم الرسم عن طريق تشغيل السياق.
Let Canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('can not find Canvas element');}// ملاحظة 2 د إلى webgl، يمكنك الحصول على سياق الرسم ثلاثي الأبعاد Let ctx = Canvas.getContext('2d'); ملاحظة: سيتم تجاهل مقتطف التعليمات البرمجية أعلاه في الأمثلة اللاحقة، وسيتم استخدام المتغير ctx مباشرة لتمثيل سياق الرسم ثنائي الأبعاد للوحة القماشية.
دعونا نلقي نظرة على نظام الإحداثيات في رسم اللوحة القماشية ثنائي الأبعاد. الزاوية اليسرى العليا لعنصر اللوحة القماشية الحالي هي أصل الإحداثيات (0،0)، والاتجاه الأفقي إلى اليمين هو الاتجاه الموجب للمحور السيني. الاتجاه الهبوطي العمودي هو الاتجاه الإيجابي للمحور Y، كما هو موضح أدناه. يمكنك تشغيل نظام الإحداثيات من خلال الترجمة والتدوير والمقياس لتحقيق بعض الرسوم المتحركة. سيتم شرح هذا الجزء بالتفصيل في قسم معرفة الرسوم المتحركة.
قطعة الخط عند رسم مقطع خطي بسيط، عادةً ما تقوم بتعيين نمط مقطع الخط أولاً، مثل اللون وعرض الخط ونمط نقطة نهاية الخط وما إلى ذلك. قمنا بتعيين نمط الرسم العام لـ ctx عن طريق تعيين strokeStyle ، والذي يمكن أن يكون rgba أو سداسي عشري قانوني اللون، أو كائن التدرج، وما إلى ذلك. التعليمة البرمجية التالية ببساطة ترسم قطعة خط أحمر بعرض 10 من (10,10) إلى (50,60).
ctx.strokeStyle = 'red';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.stroke();
دعونا نلقي نظرة أولاً على الطرق والخصائص المتعلقة برسم قطع الخط.
الخصائص ذات الصلة:
الطرق ذات الصلة:
حاول تعيين قيم lineCap مختلفة لرسم نفس مقطع الخط
ctx.lineWidth = 10;ctx.textAlign = 'center';دع الألوان = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( Let [index, lc] of lineCaps.entries()) { ctx.strokeStyle =colors[index]; // تعيين لون مقطع الخط ctx.lineCap = lc; ctx.beginPath(); // امسح المسار الحالي ctx.moveTo(10, 20 + 20 * Index); ctx.lineTo(50, 20 + 20 * Index); 80 , 25 + 20 * فهرس);} كما يتبين من النتائج في الشكل أعلاه، عند تعيين lineCap على دائري ومربع، ستتم إضافة نقاط النهاية ذات طول معين إلى طرفي مقطع الخط الأصلي، باستثناء أن الشكل الدائري هو نمط قوسي والمربع مستطيل أسلوب. شيء واحد يجب ملاحظته هو أنه يمكن أن يوجد مسار حالي واحد فقط في سياق رسم اللوحة القماشية في نفس الوقت، من أجل رسم مقاطع خطية مختلفة، يجب استدعاء beginPath() قبل كل رسم لمسح المسار الحالي وبدء مسار جديد.
دعونا نحاول استخدام قيم lineJoin مختلفة لرسم الأنماط عند التركيز على قطعتي الخط.
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';دع الألوان = ['red', 'green', 'blue'];let lineJoins = ['شطبة', 'دائري' , 'mitre'];for (let [index, lj] of lineJoins.entries()) { ctx.strokeStyle =colors[index]; // تعيين لون مقطع الخط ctx.lineJoin = lj; // تعيين lineJoin ctx.beginPath(); // امسح المسار الحالي ctx.moveTo(10 + 80 * Index, 20); 80 * الفهرس، 20)؛ ctx.lineTo(50 + 80 * الفهرس, 60); ctx.fillText(lj, 40 + 80 *index, 80);} يمكن ملاحظة أن الأنواع الثلاثة lineJoin تختلف في معالجة التركيز على مقطعي الخط. من بينها، عند تعيين lineJoin=miter ، يمكن تعيين الحد الأقصى لنسبة طول الخط المتري إلى نصف عرض الخط عن طريق تعيين سمة miterLimit . عندما يتم تجاوز هذه النسبة، سيعتمد lineJoin الطريقة المائلة.
لا يمكن للقماش رسم الخطوط الصلبة فحسب، بل الخطوط المنقطة أيضًا. ارسم خطًا منقطًا عن طريق تعيين الخاصية lineDashOffset واستدعاء setLineDash() .
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); // يمثل 8 بكسل في جزء الخط الصلب و8 بكسل في جزء الفجوة دع الألوان = ['أحمر', 'green', 'blue'];let lineDashOffsets = [1, 2, 4];لـ (دع [index, ldOffset] لـ lineDashOffsets.entries()) { ctx.strokeStyle =colors[index]; // لون مقطع الخط ctx.lineDashOffset = ldOffset; // تم تعيين الإزاحة ctx.beginPath(); 100، 20 + 20 * فهرس)؛ ctx.stroke(); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * Index);} كما ترون من الصورة، فإن lineDashOffset هو مجموعة الإزاحة لبدء رسم الخط المنقط. يقبل الأسلوب setLineDash() معلمة صفيف إذا كان عدد المصفوفات رقمًا فرديًا، فسيتم نسخ عنصر الصفيف الحالي افتراضيًا لجعله رقمًا زوجيًا. من العنصر 0 يمثل طول جزء الخط المتصل، العنصر الأول يمثل طول جزء الفجوة، العنصر الثاني يمثل طول جزء الخط الصلب، العنصر الثالث يمثل طول جزء الفجوة، إذا حيث يصل إلى العنصر الأخير في المصفوفة، وسيبدأ من الصفر مرة أخرى، وهكذا.
ctx.lineWidth = 10;ctx.textAlign = 'center';دع الألوان = ['أحمر', 'أخضر', 'أزرق', 'رمادي'];دع lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];لـ (دع [index, ld] من lineDashes.entries()) { ctx.strokeStyle =colors[index];//تعيين اللون ctx.setLineDash(ld);//Set lineDash ctx.beginPath(); + 20 * فهرس)؛ ctx.stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240، 25 + 20 * فهرس)؛} Let lineDashOffset = 0; // الخط الأوليDashOffsetctx.strokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0 } ctx.clearRect(0, 0, width, height); القماش الحالي ctx.lineDashOffset = -lineDashOffset; ctx.setLineDash([4, 4]); // اضبط طول الخط الصلب وطول الفجوة ctx.rect(20, 20, 100, 100); // ارسم مستطيلًا ctx.stroke(); // أضف المسار الحالي إلى اللوحة القماشية Stroke lineDashOffset += 1; //lineDashOffset offset plus 1 window.requestAnimationFrame(animate); // استخدم معدل إطارات المتصفح لتنفيذ وظيفة الرسوم المتحركة بشكل متكرر}animate(); ملخص عند رسم مقطع خطي، يجب أن تفهم مفهوم المسار الحالي للوحة القماش. في لحظة معينة، يوجد مسار حالي واحد فقط في اللوحة القماشية. عند بدء مسار جديد، يجب استدعاء beginPath() . يمكنك ضبط نمط الرسم لمقاطع الخط عن طريق تعيين lineWidth و lineCap و lineJoin . عند رسم مقطع خطي، يمكنك ضبط لون مقطع الخط من خلال strokeStyle .
لا يمكن رسم الخطوط الصلبة فقط في اللوحة القماشية، ولكن يمكن أيضًا رسم الخطوط المتقطعة من خلال lineDashOffset و setLineDash() .
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.