慣例上圖
主要代碼:
/**
? * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? */
? onLoad: function (options) {
? ? const ctx = wx.createCanvasContext('myCanvas')
? ? this.drawInnerShape(ctx, 100, 150, 150, 10, 20)
? ? var levelArray = new Array(1, 3, 2, 4, 3, 2,2,1,4,3)
? ? this.drawCentRect(ctx, levelArray)
? ? this.drawText()
? ? ctx.draw()
? },
? drawShape: function (ctx, radius, x, y, lines) {
? ? if (lines < 3) {
? ? ? throw new Error("多邊形邊數(shù)不能小于3")
? ? }
? ? ctx.beginPath()
? ? var array = new Array(lines)
? ? for (var i = 0; i < lines; i++) {
? ? ? var hudu = 2 * Math.PI / lines * i;
? ? ? var innerX = x + radius * Math.sin(hudu)
? ? ? var innerY = y + radius * Math.cos(hudu)
? ? ? array[i] = { x: innerX, y: innerY }
? ? ? this.data.pointArr[i].push(array[i])
? ? }
? ? for (var i = 0; i < array.length; i++) {
? ? ? var obj = array[i]
? ? ? if (i == 0) {
? ? ? ? ctx.moveTo(obj.x, obj.y);
? ? ? } else {
? ? ? ? ctx.lineTo(obj.x, obj.y);
? ? ? }
? ? }
? ? ctx.closePath()
? ? ctx.stroke()
? },
? /**
? * ctx 畫布
? * x? 中心點(diǎn)x坐標(biāo)
? * y? 中心點(diǎn)y坐標(biāo)
? * lines 多邊形邊的數(shù)量
? * innerPadding 每層半徑距離
? */
? drawInnerShape: function (ctx, radius, x, y, lines, innerPadding) {
? ? for(var i=0;i
? ? ? this.data.pointArr.push(new Array())
? ? }
? ? var num = radius / innerPadding;
? ? ctx.setStrokeStyle('red')
? ? ctx.setLineWidth(1)
? ? for (var i = 0; i < num; i++) {
? ? ? this.drawShape(ctx, radius - i * innerPadding, x, y, lines)
? ? }
? ? var outArr = this.data.pointArr
? ? //繪制中心線
? ? for (var i = 0; i < outArr.length; i++) {
? ? ? var obj = outArr[i][0]
? ? ? ctx.beginPath()
? ? ? ctx.moveTo(x, y)
? ? ? ctx.lineTo(obj.x, obj.y)
? ? ? ctx.stroke()
? ? }
? },
? /**
? * 繪制覆蓋區(qū)域
? */
? drawCentRect:function(ctx,levelArr){
? ? ctx.beginPath()
? ? ctx.setFillStyle('blue')
? ? ctx.setGlobalAlpha(0.5)
? ? var arr=this.data.pointArr
? ? for(var i=0;i
? ? ? var level=levelArr[i]
? ? ? var x = arr[i][level].x
? ? ? var y = arr[i][level].y
? ? ? if(i==0){
? ? ? ctx.moveTo(x, y)
? ? ? }else{
? ? ? ctx.lineTo(x, y)
? ? ? }
? ? }
? ? ctx.closePath()
? ? ctx.fill()
? }
還有文字沒(méi)有放上去,先這樣啦......
