这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 二维码 canvas 绘制实例详解的相关资料, 这里附有实例代码,微信小程序 使用 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,不要带单位就可以了
来源: http://www.phperz.com/article/17/0724/328811.html