Details about how to draw a QR code canvas on WeChat applet

This article mainly introduces the detailed information about the QR code canvas of the applet. The example code is attached here. the applet uses canvas to draw the QR code. For more information, see Draw the QR code canvas in the applet

Var canvas = {width: 100, height: 36}; function verification (ctx) {// clear the canvas ctx. clearRect (0, 0, canvas. width, canvas. height); // Generate a random color function getRandomColor () {return "#" + ("00000" + (Math. random () * 16777215 + 0.5)> 0 ). toString (16 )). slice (-6);} // defines the linear gradient var gradient = ctx. createLinearGradient (0, 0, canvas. width, canvas. height); gradient. addColorStop ("0", getRandomColor (); gradient. addColorStop ("0.5", getRandomColor (); gradient. addColorStop ("1.0", getRandomColor (); // Generate a random number function rnd (min, max) {return min + Math. floor (Math. random () * (max-min + 1);} // draw the interference line function line () {ctx. beginPath (); ctx. moveTo (rnd (0, canvas. width), rnd (0, canvas. height); ctx. lineTo (rnd (0, canvas. width), rnd (0, canvas. height); ctx. closePath (); ctx. lineWidth = rnd (1, 3); ctx. setFillStyle (gradient) ctx. stroke () ;}/// draw the interference point function point () {ctx. fillRect (rnd (0, canvas. width), rnd (0, canvas. height), 2, 2);} // draw the verification code var text = rnd (1000,999 9); ctx. setFontSize (30) ctx. setFillStyle (gradient) ctx. fillText (text, 2, 25); // generates the interference element for (var I = 0; I <8; I ++) {line ();} for (var I = 0; I <100; I ++) {point ();} ctx. draw () return text;} module. exports = {verification: verification };

You can simply expose the above method in a js file. By the way, there is no need to write another article about Styles. style: padding,

In the past, I used to set padding: 0px on html pages to 0. However, if I write padding: 0rpx in a small program, the padding still exists and it is written as padding: 0, do not include units.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more details about how to use the QR code canvas to draw instances, refer to the PHP Chinese website!