登录  /  注册

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

高洛峰
发布: 2017-03-30 13:55:55
原创
2594人浏览过

微信小程序 二维码canvas绘制

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

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,不要带单位就可以了

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

更多微信小程序 二维码canvas绘制实例详解相关文章请关注PHP中文网!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号