微信小程序 二维码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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
javascript白色简洁计算器
May 04 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
微信小程序 小程序制作及动画(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 curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
实例Python处理XML文件的方法
2015/08/31 Python
python回调函数中使用多线程的方法
2017/12/25 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
new修饰符是起什么作用
2015/06/28 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
养成教育经验材料
2014/05/26 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
在职证明书模板
2015/06/15 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
开业典礼致辞
2015/07/29 职场文书
高中政治教师教学反思
2016/02/23 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang