لقد قدمت بالأمس مكونًا إضافيًا لإنشاء رموز QR، QRCode.js، والذي يتم رسمه بمساعدة HTML5 Canvas. لذا، بطل الرواية اليوم هو القماش – التطبيق العملي للقماش.
1. قم بتنزيل رمز الاستجابة السريعةيوفر HTMLCanvasElement طريقة toDataURL، التي تُرجع URI للبيانات التي تحتوي على تنسيق تمثيل الصورة المحدد بواسطة معلمة النوع. من خلال هذه الطريقة يمكننا إنشاء صورة رمز الاستجابة السريعة وتنزيلها. الأمثلة هي كما يلي:
/*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>تنزيل رمز QR</a>/*js*/var Canvas = document.getElementsByTagName(' Canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png') 2. إضافة علامة مائية على الصوريمكنك بسهولة إضافة علامات مائية إلى الصور باستخدام طريقتي fillText وdrawImage في اللوحة القماشية. الأمثلة هي كما يلي:
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // إنشاء عنصر img var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; // تعيين نص العلامة المائية ctx.fillText(واجهة أمامية كبيرة, 1100, 260)}هذا كل ما لدينا لهذا اليوم. لا تتردد في مشاركة التطبيقات الأخرى للقماش. آمل أن يكون مفيدًا للتعلم للجميع، وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.