微信小程序 二維碼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),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07微信小程序 后臺https域名綁定和免費的https證書申請詳解
這篇文章主要介紹了微信小程序 后臺https域名綁定和免費的https證書申請詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11