1月 2,2019

微信小程序版“美图秀秀”

在移动时代，我们大量的拍照需要进行修图，而小程序版的“美图秀秀”可以方便解决这个需求，无需下载相关app或发送到电脑，随心所欲美化我们的图片。

使用代码

下载并安装微信开发者工具，使用微信号扫码登录开发者工具。
打开微信开发者工具，点击“小程序项目”按钮，输入小程序 AppID，项目目录选择下载的代码目录，点击确定创建小程序项目。

功能实现

一、图片裁剪

裁剪界面由image组件和裁剪框组成。image组件用来显示用户载入的图片；裁剪框在用户点击裁剪框按钮后浮动显示在图片上，裁剪框的遮罩效果通过背景颜色透明以及盒阴影（box-shadow）实现。
在image组件上检测触摸事件，通过事件对象判断触摸点数，单点触摸时通过获取手指移动距离实现图片的自由拖动，两点触摸时，通过获取两点之间的距离计算图片缩放比例，实现图片自由缩放。
在裁剪框上检测触摸事件，通过获取手指移动距离实现裁剪框自由拖动；监测裁剪框右下圆点的触摸事件，通过获取手指移动距离计算裁剪框宽、高的增减，实现裁剪框的自由缩放功能。
用户裁剪完成（点击右上角√按钮后），根据保存的裁剪框宽、高以及图片缩放比例计算图片真实裁剪区域，根据计算好的区域将图片画在隐藏canvas上，得到裁剪后的图片。

二、添加文字

添加文字界面由image组件、text组件和input组件构成。image组件用来显示用户载入的图片。input组件使用绝对定位隐藏在界面之外（left:-9999px）。text组件用来动态演示用户对文字大小、颜色、样式的调整，当用户点击添加按钮后，text组件弹出。在text组件上监测tap事件，用户点击text组件时，使input组件获得焦点从而调出键盘。在text组件上绑定触摸事件，实现text组件的自由拖动。在input组件上绑定input事件，将text组件的内容与用户输入绑定。
用户添加文字完成（点击右上角√按钮后），根据保存的text组件定位，文字大小、颜色、样式。将文字写在隐藏canvas上（先画原图片，再写文字），得到添加文字后的图片。

三、涂鸦功能

涂鸦界面由canvas组件和image组件构成。在canvas上监测touchmove事件连续画线（ctx.moveTo，ctx.lineTo）实现涂鸦功能。线宽、颜色可以由用户在下方工具栏设置。
由于canvas组件在小程序中层级最高，因此采用动态调整canvas高度的方法显示底部工具菜单栏，即调出和隐藏工具栏时，动态改变canvas的高度。
为了实现橡皮擦和清除功能（不破坏原图），采用将canvas组件覆盖在image组件上，image组件加载涂鸦前的原图，这样使用橡皮檫时擦掉的区域会显示原图。涂鸦完成后（返回主菜单），先保存canvas得到涂鸦图片，然后在隐藏canvas上先绘制涂鸦前的原图，再绘制涂鸦效果图。就能得到完整的涂鸦后的图片了。

四、拼长图

拼长图界面由image组件构成。用户从系统相册选择图片时，将图片的临时路径保存到数组中，而image组件使用列表渲染（wx:for）将数组中的图片全部载入界面，实现拼接的演示效果。在image上绑定longtap事件，长按一张图片后，弹出删除该图片的确认框，确认后在数组中删除该图片的路径，实现删除的演示效果。
保存时，将数组中的图片依次画在隐藏canvas上，所有图片宽度保持一致，高度按图片比例缩放，每张图片的定位由图片的宽高、缩放比计算得到。这样就实现的拼长图的功能。

五、拼相框

拼相框界面由两个image组件和包裹它们的view组件构成。相框为部分区域透明的图片，加载相框的image组件覆盖在加载照片的组件之上，照片就会透过透明区域显示出来。在view组件上监测触摸事件，实现照片的自由拖动和缩放。相框保存宽度全显，而照片能够动态调整，就能实现拼相框的效果了。
保存时，根据照片和相框图片的缩放比例和定位关系，在隐藏canvas中先画照片，再画相框，就就能实现拼相框功能。

六、表情包制作

表情包素材保存在腾讯云存储，进入选择界面后根据链接加载显示缩略图，image使用懒加载，加快素材的渲染。用户选择一个表情素材后，使用wx.downloadFile下载该图片并保存为临时路径。之后的处理实现与添加文字功能相似。

七、保存图片

小程序的所有图片保存都使用隐藏的canvas组件（left:-9999px）完成，根据图片的定位、缩放比、裁剪以及添加的文字的效果等数据在隐藏canvas上作图，并导出临时路径以便进一步处理。
为了保证图片的质量（图片画在canvas上后像素不降低），隐藏canvas的宽高等于图片的实际宽高。即在画布上调用drawImage之前，使用wx.getImageInfo获取需要画的图片的真实宽高，进而调整隐藏canvas的宽高。
用户点击保存按钮后，进入图片预览界面（wx.previewImage），长按图片可选择保存本地相册或者发送给微信朋友。

github地址: https://github.com/nimoat/photo-edit

作者 east

1月 2,2019

Canvas绘制图片助手(分享朋友圈）小程序

Canvas 绘图是开发中经常需要的，并且需要保存图片和分享到朋友圈。

功能：

新增 mpvue_canvas_drawer。之后同步更新。

新增由simmzl开发移植的wepy_canvas_drawer。之后同步更新。

做微信小程序中最好用的 canvas 绘图组件之一。

当前环境下，大家都非常需要分享到朋友圈这个功能，但是实现起来各有心酸（坑比较多），所以才有了如下的 canvas 绘图工具。

具有如下特性：

简单易用 —— 一个 json 搞定绘制图片
功能全 —— 满足 90% 的使用场景
- 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）
- 绘制图片
- 绘制矩形
- 保存图片
- 多图绘制
- …
代码量小

API

对象结构一览

数据对象的第一层需要三个参数: width、height、mode、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

mode 可选值有 same, 默认值为空，常规下尽量不要使用。如要使用请看 Q&A的第1点。

当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。

image（图片）

属性	含义	默认值
url	绘制的图片地址，可以是本地图片，如：`/images/1.jpeg`
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

text（文本）

属性	含义	默认值	可选值
content	绘制文本	”（空字符串）
color	颜色	black
fontSize	字体大小	16
textAlign	文字对齐方式	left	center、right
lineHeight	行高，只有在多行文本中才有用	20
top	文本左上角距离画板顶部的距离	0
left	文本左上角距离画板左侧的距离	0
breakWord	是否需要换行	false	true
MaxLineNumber	最大行数，只有设置 `breakWord: true` ，当前属性才有效，超出行数内容的显示为…	2
width	和 `MaxLineNumber` 属性配套使用，`width` 就是达到换行的宽度
bolder	是否加粗	false	true
textDecoration	显示中划线、下划线效果	none	underline（下划线）、line-through（中划线）

rect (矩形，线条)

属性	含义	默认值
background	背景颜色	black
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

Q&A

最佳实践
绘制操作的时候最好 锁住屏幕 ，例如在点击绘制的时候
```
wx.showLoading({
  title: '绘制分享图片中',
  mask: true
})
```
绘制完成之后
```
wx.hideLoading()
```
具体可以参考项目下的 /pages/multiple
[mpvue] 由于 canvasdrawer 不主动呈现绘制内容，而是交给调用者去使用 image 来展示，所以在mpvue更新数据就会render整个组件的，之后 canvasdrawer 又会重新被渲染，导致无限循环，所以默认情况下我把代码改为，传入的 painting 和之前的一样的话，组件就不渲染了。只有出现差异的内容才会更新（触发回调），这种个人认为还是可以接受的。增加顶层参数 mode, mode: 'same' 为可以绘制同样的内容。在 mpvue 模式下勿用。
二维码和小程序码如何绘制？
- 二维码和小程序码可以通过调用微信官方的接口产生，需要后端配合。
- 然后走 type: image 类型进行绘制即可。
绘制流程相关
- views 数组中的顺序代表绘画的先后顺序，会有覆盖的现象。请各位使用者注意。
如何实现圆形头像？
- 由于完成一些效果，例如： 文字下划线 等。必须要使用微信小程序 rect 相关的接口，和 clip 接口感觉相处的不好（存在bug）。可以查看微信小程序社区的帖子。
- so，提供一种解决方式：使用一张中间镂空的图片盖在头像上。
canvas drawer 组件为什么不直接显示canvas画板和其内容呢？
- 考虑到大部分场景，我们都是用来把图片保存到本地，或用以展示。
- 保存到本地，返回临时文件给调用者一定是最佳的解决方式。
- 展示，转化成图片之后，就可以使用 image 基础组件的所有显示模式了，还能设置宽高。

github下载地址:https://github.com/kuckboy1994/mp_canvas_drawer

作者 east

工具类 7月 19,2018

项目需求

在做微信小程序的时候有个图片上传之前裁剪的需求，找过一些github中的项目，都不太理想，主要是没有办法自定义宽高，于是自己研究了一下，做了一个简单的图片裁剪效果

使用方法

项目里面直接放的该功能的文件，将这个文件夹复制到小程序项目中，在app.json中启动该页面即可看到效果

注意：这里面的图片在你们的项目中可能会无法使用，在测试的话可以用自己本地或者你们项目服务器下的图片地址

显示效果

裁剪之前的效果

裁剪之后的效果

git地址: https://github.com/Wisdon/wx-cropper

作者 east

工具类 7月 19,2018

微信小程序示例 – 小相册

小相册是结合腾讯云对象存储服务（Cloud Object Service，简称COS）制作的一个微信小程序示例。在代码结构上包含如下两部分：

app: 小相册应用包代码，可直接在微信开发者工具中作为项目打开
server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例用于拉取 COS 图片资源、上传图片到 COS、删除 COS 图片

小相册主要功能如下：

列出 COS 服务器中的图片列表
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 COS 服务器中
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片
长按任意图片，可将其保存到本地，或从 COS 中删除

部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

整体架构

1. 准备域名和证书

在微信小程序中，所有的网路请求受到严格限制，不满足条件的域名和协议无法请求，具体包括：

只允许和在 MP 中配置好的域名进行通信，如果还没有域名，需要注册一个。
网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个 SSL 证书。

腾讯云提供域名注册和证书申请服务，还没有域名或者证书的可以去使用

域名注册好之后，可以登录微信公众平台配置通信域名了。

2. Nginx 和 Node 代码部署

小相册服务要运行，需要进行以下几步：

部署 Nginx，Nginx 的安装和部署请大家自行搜索（注意需要把 SSL 模块也编译进去）
配置 Nginx 反向代理到 http://127.0.0.1:9993
Node 运行环境，可以安装 Node V6.6.0
部署 server 目录的代码到服务器上，如 /data/release/qcloud-applet-album
使用 npm install 安装依赖模块
使用 npm install pm2 -g 安装 pm2

上述环境配置比较麻烦，剪刀石头布的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，推荐大家直接使用。

镜像部署完成之后，云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。

腾讯云用户可以免费领取礼包，体验腾讯云小程序解决方案。

镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码，需要体验两个小程序的朋友无需重复部署

3. 配置 HTTPS

镜像中已经部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

配置完成后，即可启动 nginx。

nginx

4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上，这样才可以使用域名进行 HTTPS 服务。

在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。

解析生效后，我们在浏览器使用域名就可以进行 HTTPS 访问。

5. 开通和配置 COS

小相册示例的图片资源是存储在 COS 上的，要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作：

开通 COS 服务分配得到唯一的APP ID
使用密钥管理生成一对SecretID和SecretKey（用于调用 COS API）
在 Bucket 列表中创建公有读私有写访问权限、CDN加速的 bucket（存储图片的目标容器）
在创建的 bucket 容器中创建文件夹，命名为photos，图片将会上传存储到该目录下

6. 启动小相册示例 Node 服务

在镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album 下：

进入该目录：

cd /data/release/qcloud-applet-album

在该目录下有个名为config.js的配置文件（如下所示），按注释修改对应的 COS 配置：

module.exports = {
    // Node 监听的端口号
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填写开通 COS 时分配的 APP ID',
    cosSecretId: '填写密钥 SecretID',
    cosSecretKey: '填写密钥 SecretKey',
    cosFileBucket: '填写创建的公有读私有写的bucket名称',
};

代码运行需要临时目录，在部署目录下创建一个临时目录 tmp。

mkdir tmp

小相册示例使用pm2管理 Node 进程，执行以下命令启动 Node 服务：

pm2 start process.json

7. 微信小程序服务器配置

进入微信公众平台管理后台设置服务器配置，配置类似如下设置：

注意：需要将 www.qcloud.la 设置为上面申请的域名，将 downloadFile 合法域名设置为在 COS 管理控制台中自己创建的 bucket 的相应 CDN 加速访问地址，如下图所示：

8. 启动小相册 Demo

在微信开发者工具将小相册应用包源码添加为项目，并把源文件config.js中的通讯域名修改成上面申请的域名。

然后点击调试即可打开小相册 Demo 开始体验。

这里有个问题。截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。

主要功能实现

上传图片

上传图片使用了微信小程序提供的wx.chooseImage(OBJECT)获取需要上传的文件路径，然后调用上传文件接口wx.request(OBJECT)发送 HTTPS POST 请求到自己指定的后台服务器。和传统表单文件上传一样，请求头Content-Type也是multipart/form-data。后台服务器收到请求后，使用 npm 模块 multiparty 解析 multipart/form-data 请求，将解析后的数据保存为指定目录下的临时文件。拿到临时文件的路径后，就可直接调用 COS SDK 提供的文件上传 API 进行图片存储，最后得到图片的存储路径及访问地址（存储的图片路径也可以直接在 COS 管理控制台看到）。

获取图片列表

调用列举目录下文件&目录 API可以获取到在 COS 服务端指定 bucket 和该 bucket 指定路径下存储的图片。

下载和保存图片

指定图片的访问地址，然后调用微信小程序提供的 wx.downloadFile(OBJECT) 和 wx.saveFile(OBJECT) 接口可以直接将图片下载和保存本地。这里要注意图片访问地址的域名需要和服务器配置的 downloadFile 合法域名一致，否则无法下载。

删除图片

删除图片也十分简单，直接调用文件删除 API 就可以将存储在 COS 服务端的图片删除。

git地址:https://github.com/CFETeam/weapp-demo-album

作者 east

7月 7,2018

股票分时图K线图小程序源码

说明

本示例K线交易量（底部柱子）的颜色变化规则为：当前现价（收盘价） – 前一条现价（收盘价）决定的，大于等于0为红（涨），小于0为绿（跌）。这里可能有的计算规则是以交易量来计算的。
数据为真实接口数据，处理后存储在模块里。由于使用者不同，接口数据格式肯定有不同，所以绘前的metadata1()和metadata2()方法为数据转化接口。
js设置的canvas大小实际上是以px为单位的，100%宽度的可设置’auto’，如页面中要指定canvas大小，则在js里需按规则先计算绘图的canvas大小。具体规则可以参考官方文档：WXSS尺寸单位
正在施工中：在图上手势移动显示坐标线和数据明细。

文档配置文档参考：wiki

代码示例：

<font style="color:rgb(51, 51, 51)"><font face="-apple-system, BlinkMacSystemFont,">/**
 * Created by ChenChao on 2016/9/27.
 */
 
var app = getApp();
var storage = require('../../utils/storage');
var kl = require('../../utils/wxChart/k-line');
var getOptionKline1 = function (type) {
    return {
        name: type || 'dk',
        width: 'auto',
        height: 160,
        average: [5, 10, 20],
        axis: {
            row: 4,
            col: 5,
            showX: false,
            showY: true,
            showEdg: true,
            paddingTop: 0,
            paddingBottom: 1,
            paddingLeft: 0,
            paddingRight: 0,
            color: '#cdcdcd'
        },
        xAxis: {
            data: [],
            averageLabel: []
        },
        yAxis: [],
        callback: function (time) {
            var page = getCurrentPages();
            page = page[page.length - 1];
            page.setData({
                kl1RenderTime: time
            });
        }
    };
};
var getOptionKline2 = function (type) {
    return {
        name: type || 'dk',
        width: 'auto',
        height: 80,
        average: [5, 10, 20],
        axis: {
            row: 1,
            col: 5,
            showX: false,
            showY: true,
            showEdg: true,
            paddingTop: 0,
            paddingBottom: 14,
            paddingLeft: 0,
            paddingRight: 0,
            color: '#cdcdcd'
        },
        xAxis: {
            times: [],
            data: [],
            averageLabel: []
        },
        yAxis: [],
        callback: function (time) {
            var page = getCurrentPages();
            page = page[page.length - 1];
            page.setData({
                kl2RenderTime: time
            });
        }
    };
};
var kLine, kLineB;
var ma5Arr, ma10Arr, ma20Arr,
    ma5bArr, ma10bArr, ma20bArr;
 
Page({
    data: {
        ma5: '',
        ma10: '',
        ma20: '',
        ma5b: '',
        ma10b: '',
        ma20b: '',
        tabName: '',
        stock: '',
        code: '',
        time: '',
        yc: '',
        kl1RenderTime: 0,
        kl2RenderTime: 0,
        minIndex: 3,
        minArray: ['5分钟', '15分钟', '30分钟', '60分钟']
    },
    onLoad: function () {
        //默认切换到日K
        this.tabChart({
            target: {
                dataset: {
                    type: 'dk'
                }
            }
        });
    },
    tabChart: function (e) {
        var type = e.target.dataset.type;
        var getDataByType = function (type) {
            return {
                'dk': function () {
                    return storage.getDkData();
                },
                'wk': function () {
                    return storage.getWkData();
                },
                'mk': function () {
                    return storage.getMkData();
                }
            }[type]();
        };
        var data = getDataByType(type);
        this.setData({
            tabName: type,
            stock: data.name,
            code: data.code,
            time: data.info.time,
            yc: data.info.yc
        });
        this.draw(data, type);
    },
    tabMinChart: function (e) {
        var type = 'mink';
        var index = e.detail.value;
        index = index=== '' ? 3 : index;
        var getDataByType = function (type) {
            return {
                'mink-5': function () {
                    return storage.getMin5Data();
                },
                'mink-15': function () {
                    return storage.getMin15Data();
                },
                'mink-30': function () {
                    return storage.getMin30Data();
                },
                'mink-60': function () {
                    return storage.getMin60Data();
                }
            }[type]();
        };
        var typeList = [5, 15, 30, 60];
        var minType = type + '-' + typeList[index];
        var data = getDataByType(minType);
        this.setData({
            tabName: type,
            minIndex: index,
            stock: data.name,
            code: data.code,
            time: data.info.time,
            yc: data.info.yc
        });
        this.draw(data, minType);
    },
    draw: function (data, type) {
        kLine = kl('k-line').init(getOptionKline1(type));
        kLine.metaData1(data, getOptionKline1(type));
        kLine.draw();
 
        kLineB = kl('k-line-b').init(getOptionKline2(type));
        kLineB.metaData2(data, getOptionKline2(type));
        kLineB.draw();
 
        var yAxis1 = kLine.options.yAxis;
        var yAxis2 = kLineB.options.yAxis;
        ma5Arr = yAxis1[1].dataShow;
        ma10Arr = yAxis1[2].dataShow;
        ma20Arr = yAxis1[3].dataShow;
        ma5bArr = yAxis2[1].dataShow;
        ma10bArr = yAxis2[2].dataShow;
        ma20bArr = yAxis2[3].dataShow;
        this.showLastAverage();
    },
    showLastAverage: function () {
        this.setData({
            ma5: ma5Arr[ma5Arr.length - 1],
            ma10: ma10Arr[ma10Arr.length - 1],
            ma20: ma20Arr[ma20Arr.length - 1],
            ma5b: ma5bArr[ma5bArr.length - 1],
            ma10b: ma10bArr[ma10bArr.length - 1],
            ma20b: ma20bArr[ma20bArr.length - 1]
        });
    }
});
</font></font>

项目地址及下载：

https://github.com/Shaman05/wxCharts

作者 east

工具类 6月 26,2018

生成二维码小程序

要实现小程序上的二维码生成器，想想基于jquery的二维码生成插件有很多，但是小程序是不允许操作dom的，所以自己找了一个纯javascript版的二维码生成源码，然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas；

效果图：

纯javascript版js源码：

qrcode

1、解读源码，修改绘制canvas部分，源代码如下

draw: function (string, canvas, size, ecc) {
            
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;

            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            size = size || _size || Math.min(canvas.width, canvas.height);

            var frame = genframe(string),
                ctx = canvas.getContext('2d'),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);

            size = roundedSize;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, size, size);
            ctx.fillStyle = '#000';
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                    }
                }
            }

        },

2、然后愉快的将代码修改如下：

draw: function (string, canvas, cavW, cavH, ecc) {
            ecclevel = ecc || ecclevel;
            canvas = canvas || _canvas;
            if (!canvas) {
                console.warn('No canvas provided to draw QR code in!')
                return;
            }

            var size =  Math.min(cavW, cavH);

            var frame = this.getFrame(string),
                ctx = wx.createContext(),
                px = Math.round(size / (width + 8));

            var roundedSize = px * (width + 8),
                offset = Math.floor((size - roundedSize) / 2);
            size = roundedSize;
            ctx.clearRect(0, 0, cavW, cavW);
            // ctx.setFillStyle('#ffffff');
            // ctx.rect(0, 0, size, size);
            ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {
                        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }
           
			wx.drawCanvas({
          		canvasId: canvas,
          		actions: ctx.getActions()
    		});
        }
    }

3、哈哈，愉快的运行起来~~~~~~报错！！

WAService.js:3 TypeError: ctx.fillRect is not a function

赶紧看看小程序的api，发现小程序是没有fillRect()方法的，只有rect()方法,所以啪~啪~啪改为如下：

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
					}
                }
            }

运行，懵逼了，怎么没有二维码呢，我的二维码呢？好吧接着分析rect语fillRect的区别，其实rect方法只是绘制出轮廓，并不会对路径进行填充，所以紧接其后要对其fill填充。

把代码改为如下：

ctx.setFillStyle('#000000');
			// ctx.setLineWidth(1);
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        ctx.fill();
                    }
                }
            }

运行~~~噢啦，终于出现期待已久的二维码喽！！

好了，总算完成了，但是怎么生成二维码的时候感觉有点慢呢，于是借用同事的手机（安卓系统）试了一下，输入网址，点击生成~~

崩了，微信直接挂了好吧接着找原因，感觉影响速度的只能是for循环那块代码，于是把ctx.fill()拿到for最外层；

 for (var i = 0; i < width; i++) {
                for (var j = 0; j < width; j++) {
                    if (frame[j * width + i]) {   
                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                        // ctx.fill();
                    }
                }
            }
            ctx.fill();

运行~~这速度，飞快！自己的小7也不卡了，又用同事的试了一把，没问题。原来对绘制路径填充只需要最后填充就Ok了，我还二逼的对每次绘制进行了填充。

下载地址：生成二维码

作者 east

标签归档图像