微信小程序 二维码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,不要带单位就可以了

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

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...