小程序基礎庫版本
2.19.0券坞，2.8以下可能不適用此方法
wxml
<canvas type="2d" canvas-id="radarCanvas" id="radarCanvas" style="width: 200rpx; height: 200rpx;">
</canvas>
js
createCanvas() {
const query = wx.createSelectorQuery();
query.select('#radarCanvas').fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 400; // 畫布寬度
canvas.height = 400; // 畫布高度
ctx.strokeStyle = 'white';
ctx.fillStyle = '#4b75e7';
ctx.lineWidth = '2';
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(400, 200);
ctx.lineTo(200, 400);
ctx.lineTo(0, 200);
ctx.lineTo(200, 0);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(300, 200);
ctx.lineTo(200, 400);
ctx.lineTo(100, 200);
ctx.lineTo(200, 0);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = '#9fccfd';
ctx.fill();
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "white";
ctx.font = '90px "微軟雅黑"';
ctx.fillText("20", 200, 200);
})
}
效果
效果圖
具體的動態(tài)數(shù)值违柏，通過計算偏移量即可
