دەرهێنەری پاڵێتی ڕەنگی وێنەی بەخۆڕایی

چۆن کار دەکات

دەرهێنانی ڕەنگ تەواو لە وێبگەڕەکەتدا کاردەکات بە بەکارهێنانی ئەلگۆریتمی کۆمەڵکردنی k-means++ی دەستنووس جێبەجێکراو لەسەر داتای پیکسێلی خاوی خوێندراوەوە لە APIی Canvasەوە — بەبێ سێرڤەر، کتێبخانەی لایەنی سێیەم. هەمان وێنە و ڕێکخستنی ژمارەی ڕەنگ هەمیشە هەمان پاڵێت دروست دەکات چونکە ئەلگۆریتمەکە دروستکەری ژمارەی بەهەڕەمەکی ڕاشکاو بەکاردێنێت (mulberry32) لەبری Math.random.

1. 1
   Canvas داتای پیکسێل دەخوێنێتەوە

   وێنەکە دەکێشرێت لەسەر توخمێکی Canvasی HTMLی دەرەوەی شاشە و پیکسێلی دادەبەزێت بۆ زۆرترین 200px لەسەر درێژترین لای خۆی. getImageData()ی APIی Canvas هەموو پیکسێلێک وەک بایتی خاوی RGBA دەگەڕێنێتەوە، و پیکسێلی تەواو-شەفاف (ئەلفا < 128) پێش دەستپێکردنی کۆمەڵکردن لادەبردرێن.
2. 2
   k-means++ پیکسێلەکان کۆدەکات

   دروستکەرێکی k-means++ سەنترۆیدەکان بە ڕاشکاوانە تۆو دەکات، پاشان ئەلگۆریتمەکە تا 20 جار دووبارە دەبێتەوە: هەر پیکسێلێک بۆ نزیکترین سەنترۆیدی خۆی لە بواری RGBدا دیاریدەکرێت، پاشان سەنترۆیدەکان دووبارە ژمێردەکرێنەوە وەک مامناوەندی هەموو پیکسێلی دیاریکراو. کۆمەڵێک کە دەکەونە هەمان نرخی شازدەیی تێکەڵ دەکرێن، بۆیە هەر نموونەیەک لە ئەنجامدا تاکە.
3. 3
   زانیاری هەر-ڕەنگ ژمێردەکرێت

   هەر سەنترۆیدێک دەگۆڕدرێت بۆ HEX، HSL، و بەشی خۆی لە کۆی پیکسێلدا (سەدی). ڕووناکی نیسبی WCAG بەپێی فۆرمولی ستاندارد ژمێردەکرێت، و ڕێژەی جیاوازی لەگەڵ ڕەش و سپیدا لەگەڵ هەر نموونەیەکدا نیشان دەدرێت.
4. 4
   دەرهێنان و دەرچوونی ئایدرۆپەر

   پاڵێتەکە دەتوانرێت وەک تایبەتمەندی تایبەتی CSS، گۆڕاوی SCSS، پارچەیەکی ڕێکخستنی Tailwind، یان JSON کۆپی بکرێت. ئایدرۆپەرێکی کرتە-بۆ-نموونەگرتن کرتەکەت لەسەر پێشبینینەکە نەخشە دەکات بۆ شوێنی وردی پیکسێلی سەرچاوە لەسەر canvasیەکی تەواو-ڕیزۆلیوشن، ڕەنگی ئەو پیکسێلە زیاد دەکات بۆ لیستێکی جیای ڕەنگی هەڵبژێردراو. نواری پاڵێتی PNG دەتوانرێت داگیرێت لە ڕێگای Canvas toBlob()ـەوە.

ئامرازە پەیوەندیدارەکان