微信小程序利用canvas实现蜘蛛网图

微信小程序利用canvas实现蜘蛛网图

1、.wxml文件

<!--canvas-id是canvas的唯一标识-->
<canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas"></canvas>

2、.js文件

const app = getApp();
Page({
//事件处理函数
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
radar({
element: 'firstCanvas',
x:100,//原点的x坐标
y:100,//原点的y坐标
maxR:65,//最大圆半径
color:'#ffffff',
width:'1',
arc: [{ r: '20' }, { r: '35' }, {r: '50' }, { r: '65' }],
standard:6,//标准线的条数
});
}，
radar:function(config) {
var context = wx.createCanvasContext(config.element);
var x = config.x;//原点的x坐标
var y = config.y;//原点的y坐标
var maxR = config.maxR;//最大圆半径
var angle = 360 / config.standard * 2 * Math.PI / 360;//计算标准线的弧度
context.setStrokeStyle(config.color || '#000000');//设置绘制的颜色
context.setLineWidth(config.width || '1');//设置绘制图线的宽度
var arc = config.arc || [];//获取要绘制圆的半径
//绘制圆
for (let i = 0; i < arc.length; i++) {
let r = arc[i].r;
context.moveTo(parseFloat(x) + parseFloat(arc[i].r), y);
context.arc(x, y, r, 0, 2 * Math.PI);
}
//绘制标准线
for (let i = 0; i < config.standard; i++) {
context.moveTo(x, y);
context.lineTo(x + maxR * Math.cos(angle * (i + 1)), y + maxR * Math.sin(angle * (i + 1)));
}
context.stroke();
context.draw();
}
})

3、效果图