تعد لوحة Html5 المضافة حديثًا وظيفة قوية، ويقدر أن الجميع يستخدمونها يوميًا، ولكن التردد ليس مرتفعًا، وفي بعض الأحيان يتم استخدامها لتجميع الصور فوضوي، لذلك تم تغليف وظيفة الرسم على القماش ورسم النص بشكل شائع، وأنا راضٍ تمامًا عنها حاليًا ويمكنها إكمال مهام رسم القماش بسرعة والاستجابة بهدوء للتغييرات في المتطلبات.
li-canvas.jsتم تغليف وظيفة اللوحة القماشية في Html5 لتسهيل وظائف مثل صورة واحدة، ورسم متعدد الصور، ورسم صور زاوية مستديرة، ورسم نص متعدد الأسطر، وتغليف الأسطر تلقائيًا، وحفظ الصور وتنزيلها، وما إلى ذلك.
عنوان جيثب: github.com/501351981/l…
الوظائف الرئيسية• رسم الصورة: رسم صورة واحدة/صور متعددة، رسم صورة بزاوية مستديرة • رسم النص: رسم نص متعدد الفقرات، التفاف الخط تلقائيًا • حفظ الصورة: الحصول على بيانات الصورة، وتنزيل الصور على المستوى المحلي، ودعم أسماء الصور التي تم تنزيلها حسب الطلب .
تثبيت npm# تثبيت npm تثبيت npm - حفظ li-canvasاقتباس مباشر
استيراد ملفات js مباشرة إلى HTML
<script src=dist/li-canvas.js></script>كيفية الاستخدام إنشاء مثيل
عند استخدام li-canvas، تحتاج إلى إنشاء مثيل للكائن أولاً، new LiCanvas(canvas_id,options), وتمرير معرف اللوحة القماشية، والخيارات اختيارية، ويمكنك تعيين خلفية اللوحة القماشية ونمط النص الافتراضي، وما إلى ذلك.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var Canvas= جديد LiCanvas('test') </script></body> ... رسم الصورة• رسم صورة واحدة
استدعاء addDrawImageTask(image)، حيث تكون صورة المعلمة عبارة عن كائن، بما في ذلك
src: عنوان URL للصورة
x: الإحداثي x للزاوية العلوية اليسرى من الصورة على اللوحة القماشية
y: الإحداثي y للزاوية اليسرى العليا من الصورة على القماش
العرض: عرض رسم الصورة
الارتفاع: ارتفاع رسم الصورة
borderRadius: نصف قطر زاوية الصورة
عند استدعاء addDrawImageTask(image)، لا يتم رسم الصورة على الفور، ولكن تتم إضافة مهمة رسم فقط عند استدعاء draw(رد الاتصال)، ويتم استدعاء وظيفة رد الاتصال عند اكتمال التنفيذ.
لماذا تفعل هذا؟ نظرًا لأنه يجب تنزيل الصورة أولاً عند الرسم، فهذه عملية غير متزامنة، لذا تتم إضافتها إلى قائمة المهام أولاً، وعندما يتم استدعاء draw()، يتم تنفيذها بالترتيب الذي تتم به إضافة المهام.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//أو عنوان url للصورة x:0,//x إحداثي الزاوية اليسرى العليا y:0,//y إحداثي الجزء العلوي الأيسر عرض الزاوية: 1563,/ / ارتفاع عرض رسم الصورة: 1180,// ارتفاع رسم الصورة borderRadius:0 // نصف قطر زاوية الصورة} var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) // أضف مهمة رسم، ولا يتم تنفيذ الرسم على الفور Canvas.draw(()=>{ console.log(تم الانتهاء من الرسم) }) </script></body> ...• رسم رسوم بيانية متعددة
يمكنك استدعاء addDrawImageTask(image) عدة مرات متتالية، أو يمكنك تمرير مجموعة من الصور.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var img1={ src:http://******.com/***.png, x:0, y:0, width:1563, height:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, width: 1563، الارتفاع: 1180، borderRadius:0 } var imgs=[ { src:http://******.com/***.png, x:0, y:0, العرض:100، الارتفاع:100، borderRadius:0}، { src:http://******.com/***.png، x:0، y:0، العرض:100، الارتفاع:100، borderRadius:0 } ] var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(img1) Canvas.addDrawImageTask(img2) // استدعاءات متعددة لتحقيق رسم متعدد الصور Canvas.addDrawImageTask(imgs) // يمكن أيضًا تحقيق رسم متعدد الصور عن طريق تمرير مصفوفة مباشرة Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script> </body> ...• رسم صور مستديرة أو دائرية
فقط قم بتعيين borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var img1={ src:http://******.com/***.png, x:0, y:0, width:100, height:100, borderRadius:50 // اضبط نصف قطر الشرائح عندما يكون نصف قطر الشرائح نصف طول ضلع المربع، فهي دائرة} var Canvas=new LiCanvas('test') Canvas .addDrawImageTask(img1) Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script></body> ... ارسم النص• رسم النص
استدعاء addDrawTextTask(text,style)
النص: النص الذي سيتم رسمه
النمط: نمط النص، بما في ذلك x: تنسيق x للزاوية اليسرى العليا لموضع البداية لرسم النص
y: الإحداثي y للزاوية اليسرى العليا للموضع الفعلي لرسم النص
العرض: عرض سطر واحد من النص، إذا تجاوز العرض، فسيتم التفافه تلقائيًا.
حجم الخط: حجم النص، عدد صحيح، الوحدة هي بكسل
وزن الخط: سمك النص غامق، أكثر جرأة، وما إلى ذلك أو 400، 500، 600... نفس وزن الخط في CSS
FontFamily: خط النص، مثل CSS
ارتفاع الخط: ارتفاع الخط، عدد صحيح، وحدة بكسل
اللون: اللون
MarginBottom: إذا كانت هناك فقرات متعددة من النص، فيمكنك أيضًا تحديد المسافة بين الفقرات
رسم النص غير متزامن أيضًا، ولا يتم رسمه فعليًا حتى يتم استدعاء الرسم (رد الاتصال).
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask(النص المراد رسمه، { x:110، y:496، العرض: 1340، حجم الخط: 54، وزن الخط: 'bolder'، FontFamily: PingFangSC-Regular، 'Microsoft YaHei'، SimSun، Arial، 'Helvetica Neue'، sans-serif، lineHeight: 70، اللون:'#1a1a1a'، الهامش السفلي:40 }) Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script></body> ...• رسم فقرات متعددة من النص
الطريقة الأولى: استدعاء addDrawTextTask(text, style) بشكل متكرر، كما هو مذكور أعلاه
الطريقة الثانية: يمكن تمرير النص في مصفوفة ويمكن مشاركة النمط
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var Canvas=new LiCanvas('test') Canvas.addDrawTextTask([نص الفقرة المراد رسمها 1، فقرة النص المراد رسمها 2]، { x:110، y:496، العرض:1340، حجم الخط:54، حجم الخط: 'bolder'، FontFamily:PingFangSC-Regular،' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, اللون:'#1a1a1a'، هامش الأسفل:40 }) Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script></body> ...يمكن أيضًا تمرير النمط بقيمة افتراضية عند إنشاء مثيل للكائن لتجنب تعيين بعض الأنماط المشتركة بشكل متكرر.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var Canvas=new LiCanvas('test',{fontStyle:{fontSize:20, FontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', هامشBottom:40 } }) Canvas.addDrawTextTask (فقرة نصية سيتم رسمها 1، {س:110، ص:496، العرض:1340، }) Canvas.addDrawTextTask(فقرة نصية سيتم رسمها 2,{ x:110, y:696, width:1340, }) Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script></ الجسم>...إذا كانت هناك فقرة نصية في فقرات متعددة تحتاج إلى تعيينها في أنماط مختلفة، فيمكنك أيضًا تحديد النمط بشكل منفصل، على النحو التالي، هل هو مرن جدًا ~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var Canvas=new LiCanvas('test',{fontStyle:{fontSize:20, FontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', هامشBottom:40 } }) Canvas.addDrawTextTask([{ text:To نص الفقرة المرسومة 1، حجم الخط: 60 }، فقرة نصية 2 سيتم رسمها، فقرة نصية 3 سيتم رسمها]،{ x:110، y:496، width:1340، }) Canvas.draw(()=>{ console.log(اكتمل الرسم) }) </script></body> ...حفظ صورة التحميل
• تحميل الصور
التنزيل كصورة png: saveToPng (اسم الملف)
التنزيل كصورة jpeg: saveToJpeg (اسم الملف)
تنزيل كصورة gif: saveToGif (اسم الملف)
ملاحظة: يجب استدعاء تنزيل الصور في وظيفة رد الاتصال الخاصة بـ draw() حتى يصبح ساري المفعول.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, العرض: 1563، الارتفاع: 1180، borderRadius:0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) Canvas.draw(()=>{ Canvas.saveToPng(li-canvas) }) </script ></بودي>...•الحصول على بيانات الصورة
في بعض الأحيان، لا نريد تنزيل الصورة، على سبيل المثال، في متصفح WeChat، نريد في الواقع أن يضغط المستخدم لفترة طويلة على الصورة لحفظها. في هذا الوقت، نريد إدراج بيانات الصورة التي تم تجميعها بواسطة اللوحة القماشية src من img.
اتصل: getImageData() للحصول على بيانات الصورة المركبة
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1 بكسل أحمر خالص></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, العرض:1563, الارتفاع:1180, borderRadius:0 } var Canvas=new LiCanvas('test') Canvas.addDrawImageTask(bg) Canvas. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...عنوان جيثب: github.com/501351981/l…
تلخيصما ورد أعلاه هو ما يقدمه لك المحرر، وكيفية تنفيذ صورة واحدة، وصور متعددة، ورسم صور زاوية مستديرة، ونص سطر واحد، ونص متعدد الأسطر، وما إلى ذلك بسهولة في HTML5 من خلال li-canvas، وآمل أن يكون ذلك مفيدًا لك إذا كان لديك أي أسئلة، يرجى ترك لي رسالة وسوف أرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!