// pages/test1/verificationQr/verificationQr.js
var ctx;
Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {
? ? width:{
? ? ? type: Number,
? ? ? value: 150
? ? },
? ? height: {
? ? ? type: Number,
? ? ? value: 48
? ? },
? ? count:{
? ? ? type:Number,
? ? ? value:4
? ? },
? ? fontSize: {
? ? ? type: Number,
? ? ? value: 34
? ? },
? ? fontFamily:{
? ? ? type: String,
? ? ? value: "SimHei"
? ? }
? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? text: '',
? ? count: 4,
? ? width:90,
? ? height:28,
? ? fontSize:30,
? ? fontFamily:"SimHei"
? },

? ready() {
? ? this.setData({
? ? ? count:this.properties.count,
? ? ? width:this.properties.width,
? ? ? height:this.properties.height,
? ? ? fontSize:this.properties.fontSize,
? ? ? fontFamily:this.properties.fontFamily
? ? })
? ? this.drawPic(this)
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? crash(){
? ? ? this.drawPic(this)
? ? },
? ? /**繪制驗證碼圖片**/
? ? drawPic(that) {
? ? ? ctx = wx.createCanvasContext('canvas',this);
? ? ? /**繪制背景色**/
? ? ? ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導(dǎo)致看不清
? ? ? ctx.fillRect(0, 0, that.data.width, that.data.height)
? ? ? /**繪制文字**/
? ? ? var arr;
? ? ? var text = '';
? ? ? var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
? ? ? for (var i = 0; i < that.data.count; i++) {
? ? ? ? var txt = str[randomNum(0, str.length)];
? ? ? ? ctx.fillStyle = randomColor(50, 160); //隨機(jī)生成字體顏色
? ? ? ? ctx.font = randomNum(20, 26) + 'px SimHei'; //隨機(jī)生成字體大小
? ? ? ? var x = 10 + i * 20;
? ? ? ? var y = randomNum(25, 30);
? ? ? ? var deg = randomNum(-30, 30);
? ? ? ? //修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(deg * Math.PI / 180);
? ? ? ? ctx.fillText(txt, 5, 0);
? ? ? ? text = text + txt;
? ? ? ? //恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
? ? ? ? ctx.rotate(-deg * Math.PI / 180);
? ? ? ? ctx.translate(-x, -y);
? ? ? }
? ? ? /**繪制干擾線**/
? ? ? for (var i = 0; i < 4; i++) {
? ? ? ? ctx.strokeStyle = randomColor(40, 180);
? ? ? ? ctx.beginPath();
? ? ? ? ctx.moveTo(randomNum(0, that.data.width), randomNum(0, that.data.height));
? ? ? ? ctx.lineTo(randomNum(0, that.data.width), randomNum(0, that.data.height));
? ? ? ? ctx.stroke();
? ? ? }
? ? ? /**繪制干擾點(diǎn)**/
? ? ? for (var i = 0; i < 20; i++) {
? ? ? ? ctx.fillStyle = randomColor(0, 255);
? ? ? ? ctx.beginPath();
? ? ? ? ctx.arc(randomNum(0, that.data.width), randomNum(0, that.data.height), 1, 0, 2 * Math.PI);
? ? ? ? ctx.fill();
? ? ? }
? ? ? ctx.draw(false, function() {
? ? ? ? console.log(text)
? ? ? ? that.triggerEvent('result', { text });
? ? ? ? that.setData({
? ? ? ? ? text: text,
? ? ? ? })
? ? ? })
? ? }
? }
})
function randomNum(min, max) {
? return Math.floor(Math.random() * (max - min) + min);
}
/**生成一個隨機(jī)色**/
function randomColor(min, max) {
? var r = randomNum(min, max);
? var g = randomNum(min, max);
? var b = randomNum(min, max);
? return "rgb(" + r + "," + g + "," + b + ")";
}

{
? "component": true,
? "usingComponents": {}
}

<canvas style="width:{{width}}px;height:{{height}}px" canvas-id="canvas" bindtap='crash'></canvas>

<verification-code id="verification"></verification-code>
<view bindtap="crash">刷新</view>

// pages/test/test/test.js
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {},
? crash() {
? ? this.verification.crash()
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
?? ?this.verification = this.selectComponent('#verification')
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

{
? "usingComponents": {
? ?? ?"verification-code": "/components/verification-code/verification-code"
?? ?}
}