微信小程序 二维码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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 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
单位速度在实战中的运用
2020/03/04 星际争霸
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JS模板实现方法
2013/04/03 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
npm scripts 使用指南详解
2018/10/08 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
详解Django中的过滤器
2015/07/16 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python Opencv将图片转为字符画
2021/02/19 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python flask实现分页的示例代码
2018/08/02 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
护士个人简历自荐信
2013/10/18 职场文书
毕业生自荐书
2014/02/03 职场文书
网络教育自我鉴定
2014/02/04 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android