微信小程序二維碼canvas繪制實例詳解

更新時間：2017年01月06日 14:51:24 投稿：lqh

這篇文章主要介紹了微信小程序二維碼canvas繪制實例詳解的相關(guān)資料,這里附有實例代碼，微信小程序使用canvas 進(jìn)行二維碼的繪制，需要的朋友可以參考下

微信小程序二維碼canvas繪制

var canvas = {

  width: 100,

  height:36

};

function verification(ctx) {




  // //清空畫布

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // //生成隨機顏色

  function getRandomColor() {

    return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);

  }

  // //定義線性漸變

  var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

  gradient.addColorStop("0", getRandomColor());

  gradient.addColorStop("0.5", getRandomColor());

  gradient.addColorStop("1.0", getRandomColor());




  // //生成隨機數(shù)

  function rnd(min, max) {

    return min + Math.floor(Math.random() * (max - min + 1));

  }




  // //繪制干擾線條

  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();

  }




  // //繪制干擾點

  function point() {

    ctx.fillRect(rnd(0, canvas.width), rnd(0, canvas.height), 2, 2);

  }




  // //繪制驗證碼

  var text = rnd(1000, 9999);

  ctx.setFontSize(30)

  ctx.setFillStyle(gradient)

  ctx.fillText(text,2, 25);




  // //生成干擾元素

  for (var i = 0; i < 8; i++) {

    line();

  }

  for (var i = 0; i <100; i++) {

    point();

  }

  ctx.draw()

  return text;

}

module.exports = { verification: verification };

上面直接放在一個js中吧方法暴露出來就可以了，順便說一下關(guān)于樣式的問題，因為沒必要再去寫一篇了，樣式：padding ，

以前在html頁面上我有時候習(xí)慣padding：0px，這樣設(shè)置為0，但是在小程序中寫成padding：0rpx，仍會有內(nèi)邊距存在，寫成padding：0，不要帶單位就可以了

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: