惯例上图
主要代码:
/**
* 生命周期函数--监听页面加载
*/
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("多边形边数不能小于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 中心点x坐标
* y 中心点y坐标
* lines 多边形边的数量
* 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()
}
},
/**
* 绘制覆盖区域
*/
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()
}
还有文字没有放上去,先这样啦......
网友评论