用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序使用canvas进行二维码绘制

hongweicao 2016-12-30 09:30

var canvas = { width: 100, height:36};function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ( ...


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

    // //生成随机数
    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中吧方法暴露出来就可以了,顺便说一下关于 样式的问题,因为没必要再去写一篇了,样式:padding ,
以前在html页面上我有时候习惯padding:0px,这样设置为0,但是在小程序中写成padding:0rpx,仍会有内边距存在,写成padding:0,不要带单位就
可以了
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
来自: 本站原创

相关阅读