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


Posted in Javascript onJanuary 06, 2017

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

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

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript 数组详解
Oct 10 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
jquery图形密码实现方法
Mar 11 Javascript
input框中的name和id的区别
Nov 16 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 #Javascript
JS调用Android、Ios原生控件
Jan 06 #Javascript
JS正则匹配中文的方法示例
Jan 06 #Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 #Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 #Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 #Javascript
js实现前端分页页码管理
Jan 06 #Javascript
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
PHP Directory 函数的详解
2013/03/07 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python二元表达式用法
2019/12/04 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
外科实习自我鉴定
2013/10/06 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
华山导游词
2015/02/03 职场文书
导游词范文
2015/02/13 职场文书
保险内勤岗位职责
2015/04/13 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android