微信小程序 二维码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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
如何实现vue的tree组件
Dec 03 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 $_FILES函数详解
2011/03/09 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
电子专业自荐信
2014/07/01 职场文书
2015年路政工作总结
2015/05/22 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
微信小程序调用python模型
2022/04/21 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL