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

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

微信小程序 二维码canvas绘制

var canvas = {

width: 100,

height:36

};

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

// //生成随机数

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)http://, 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);

}

TrdjPwghT // //绘制验证码

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。