HTML5 البرنامج التعليمي: TAG CANVAS يرسم رسومات التدرج التدريجي الخطي

مقالة مقدمة من wulin.com (www.vevb.com): تطبيق HTML5 Daily Training Canvas Tag - رسم رسومات التدرج الخطية.

حتى الآن ، تم تقديم المعرفة الأساسية لرسم الرسومات باستخدام قماش. بدءًا من هذا القسم ، سنقدم أحد المعرفة الأخرى الأكثر تقدماً - التدرج الخطي. أولاً ، دعنا نراجع ملء الألوان المحدد في "HTML5 Daily Practice: تطبيق علامات القماش - رسم مستطيلات". عند رسم التدرج الخطي ، نحتاج إلى استخدام كائن جديد - كائن LineArgradient ، واستخدام طريقة CreateLineArgradiend لكائن سياق الرسم البياني لإنشاء الكائن. تعريف هذه الطريقة كما يلي:

Context.CreatelIneArgradient (xStart ، ystart ، xend ، yend) ؛

XSTART: المحور الأفقي لنقطة البدء التدرج

YSTART: الإحداثيات الرأسية لنقطة البدء التدرج

Xend: المحور الأفقي نقطة التدرج

Yend: الإحداثي العمودي لنقطة نهاية التدرج

باستخدام هذه الطريقة ، يتم إنشاء كائن LineArgradient باستخدام نقطتين إحداثيين. فكيف يجب تعيين لون التدرج؟

بعد مرور كائن LineArgradient ، نستخدم طريقة AddColorStop لتعيينه. مثال هذه الطريقة على النحو التالي:

context.addcolorstop (الإزاحة ، اللون) ؛

استخدم هذه الطريقة لإلحاق لون التدرج ، الذي يحتوي على معلمتان:

الإزاحة: هو إزاحة رقم النقطة العائمة بين 0-1 من اللون تاركًا نقطة انطلاق التدرج ، والتي تضع اللون على الإزاحة من نقطة بداية التدرج.

اللون: هو اللون المستخدم لتعيين الرسم

توضيح لمعلمة الإزاحة في طريقة AddColorStop