背景

        H5中會遇到生成二維碼的功能需求，如網頁名片、雙屏互動等場景。

實現方法

        主要用到一個生成二維碼圖片的外掛QRCode.js（外掛下載及文件說明在底部參考連結）。說兩種使用環境，第一種是在網頁中直接使用，第二種是在Cocos中使用。

        第一種，在網頁中直接使用方法很簡單，新增Dom結構，引入javascript庫檔案，然後設定呼叫引數即可，

// 設定引數方式
var qrcode = new QRCode('qrcode', {
  text: 'your content',  // 可以是地址連結
  width: 256,
  height: 256,
  colorDark : '#000000', // 前景顏色
  colorLight : '#ffffff' // 背景顏色
});
 

        第二種，在Cocos中，先使用外掛演算法庫得到二維矩陣資料（由true和false組成），然後根據每個小塊的值去判斷採用前景色或者背景色用cc.Graphic繪圖，也就是畫黑白塊。    

    // 生成二維碼，url為二維碼內容或者地址連結
    createQRCode: function(url){
        var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
        qrcode.addData(url);
        qrcode.make();

        var ctx = this.mGraphics.getComponent(cc.Graphics);

        // 計算組成二維碼每個小塊的尺寸
        var tileW = this.mGraphics.node.width / qrcode.getModuleCount();
        var tileH = this.mGraphics.node.height / qrcode.getModuleCount();

        // Graphics繪圖
        for (var row = 0; row < qrcode.getModuleCount(); row++) {
            for (var col = 0; col < qrcode.getModuleCount(); col++) {
                // 根據小塊的值判斷採用前景色或者背景色繪製
                if (qrcode.isDark(row, col)) { 
                    ctx.fillColor = cc.Color.BLACK;
                } else {
                    ctx.fillColor = cc.Color.WHITE;
                }
                var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
                var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
                ctx.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                ctx.fill();
            }
        }
    }
 

備註

        市面上有二維碼介面提供商（微微二維碼），按等級付費或者按次付費。

        阿里雲市場彩色二維碼生成與解碼：

參考連結