微信小程序 二維碼canvas繪制實(shí)例詳解
微信小程序 二維碼canvas繪制
var canvas = {
width: 100,
height:36
};
function verification(ctx) {
// //清空畫布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// //生成隨機(jī)顏色
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());
// //生成隨機(jī)數(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();
}
// //繪制干擾點(diǎn)
function point() {
ctx.fillRect(rnd(0, canvas.width), rnd(0, canvas.height), 2, 2);
}
// //繪制驗(yàn)證碼
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 };
上面直接放在一個(gè)js中吧方法暴露出來就可以了,順便說一下關(guān)于 樣式的問題,因?yàn)闆]必要再去寫一篇了,樣式:padding ,
以前在html頁面上我有時(shí)候習(xí)慣padding:0px,這樣設(shè)置為0,但是在小程序中寫成padding:0rpx,仍會(huì)有內(nèi)邊距存在,寫成padding:0,不要帶單位就可以了
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼
這篇文章主要介紹了微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼的相關(guān)資料,這里含有源碼,需要的朋友可以參考下2017-01-01
微信小程序 支付簡(jiǎn)單實(shí)例及注意事項(xiàng)
這篇文章主要介紹了微信小程序 支付簡(jiǎn)單實(shí)例的相關(guān)資料,這里參考官方文檔寫的簡(jiǎn)單實(shí)例,并提出注意事項(xiàng),需要的朋友可以參考下2017-01-01
arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析
這篇文章主要為大家介紹了arrify 轉(zhuǎn)數(shù)組實(shí)現(xiàn)示例源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
JS前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解
這篇文章主要為大家介紹了前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01


