微信小程序 二维码canvas绘制实例详解

前端之家收集整理的这篇文章主要介绍了微信小程序 二维码canvas绘制实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 二维码canvas绘制

width: 100,height:36

};

function verification(ctx) {

// //清空画布

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

// //生成随机颜色

function getRandomColor() {

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

}

// //定义线性渐变

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

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

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

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

// //生成随机

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.height));

ctx.closePath();

ctx.lineWidth = rnd(1,3);

ctx.setFillStyle(gradient)

ctx.stroke();

}

// //绘制干扰点

function point() {

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

}

// //绘制验证码

var text = rnd(1000,9999);

ctx.setFontSize(30)

ctx.setFillStyle(gradient)

ctx.fillText(text,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中吧方法暴露出来就可以了,顺便说一下关于 样式的问题,因为没必要再去写一篇了,样式:padding ,

以前在html页面上我有时候习惯padding:0px,这样设置为0,但是在小程序中写成padding:0rpx,仍会有内边距存在,写成padding:0,不要带单位就可以了

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/42799.html

猜你在找的微信小程序相关文章