欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年01月06日 14:51:24   投稿:lqh  
這篇文章主要介紹了微信小程序 二維碼canvas繪制實例詳解的相關(guān)資料,這里附有實例代碼,微信小程序 使用canvas 進行二維碼的繪制,需要的朋友可以參考下

微信小程序 二維碼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,不要帶單位就可以了

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

相關(guān)文章

  • websocket心跳重連實現(xiàn)探索(npm:websocket-heartbeat-js)

    websocket心跳重連實現(xiàn)探索(npm:websocket-heartbeat-js)

    這篇文章主要為大家介紹了websocket心跳重連實現(xiàn)探索(npm:websocket-heartbeat-js),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • async-await消滅異步回調(diào)實例詳解

    async-await消滅異步回調(diào)實例詳解

    這篇文章主要為大家介紹了async-await消滅異步回調(diào)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • Evil.js項目源碼解讀

    Evil.js項目源碼解讀

    這篇文章主要為大家介紹了最近火爆全網(wǎng)的?Evil.js?源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • 微信小程序 動態(tài)傳參實例詳解

    微信小程序 動態(tài)傳參實例詳解

    這篇文章主要介紹了微信小程序 動態(tài)傳參實例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • 微信小程序 后臺https域名綁定和免費的https證書申請詳解

    微信小程序 后臺https域名綁定和免費的https證書申請詳解

    這篇文章主要介紹了微信小程序 后臺https域名綁定和免費的https證書申請詳解的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • JS實現(xiàn)頁面炫酷的時鐘特效示例

    JS實現(xiàn)頁面炫酷的時鐘特效示例

    這篇文章主要為大家介紹了JS實現(xiàn)頁面炫酷的時鐘特效示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • JS前端接口請求參數(shù)混淆方案分享

    JS前端接口請求參數(shù)混淆方案分享

    這篇文章主要為大家介紹了JS前端接口請求參數(shù)混淆方案分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • JS面試之異步模擬超時重傳機制詳解

    JS面試之異步模擬超時重傳機制詳解

    這篇文章主要為大家介紹了JS面試之異步模擬超時重傳機制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • 微信小程序 數(shù)組(增,刪,改,查)等操作實例詳解

    微信小程序 數(shù)組(增,刪,改,查)等操作實例詳解

    這篇文章主要介紹了微信小程序 數(shù)組(增,刪,改,查)等操作實例詳解的相關(guān)資料,這里對小程序的數(shù)組進行操作,簡單實例,需要的朋友可以參考下
    2017-01-01
  • JS 基本概念詳細(xì)介紹

    JS 基本概念詳細(xì)介紹

    這篇文章主要介紹JS 基本概念,對于初學(xué)者來說,Javascript 乍一看似乎很容易,因為它的類似于 C 的語法,但不管它的運行方式如何,對語言 (ESNext) 及其框架所做的不斷變化可能會讓初學(xué)者不知所措。下面我們就來看JS 初學(xué)者怎么入門吧
    2021-10-10

最新評論