微信小程序cavas画仪表盘

const that = this;

wx.createSelectorQuery().select(".credit-canvas").boundingClientRect(function(rect) {

that.setData({

canvasWidth: rect.width,

canvasHeight: rect.height

})

}).exec()

 

var pageData = {}

for (var i = 1; i < 5; i++) {

(function(index) {

pageData['slider' + index + 'change'] = function(e) {

}

})(i)

}

this.timeout = setTimeout(this.drawCredit, 100);

 

 

drawCredit: function(e) {

const that = this;

const ctx = wx.createCanvasContext('credit-canvas');

const black = that.data.blacken;

// 圆弧半径

const radius = this.data.canvasWidth3 * 3 / 7;

// 内圆宽度

const sweepInWidth = 10;

// 外圆宽度

const sweepOutWidth = 3;

// 圆弧初始的弧度

const startAngle = 0.9 * Math.PI;

// 圆弧结束的弧度

const endAngle = 2.1 * Math.PI;

// 圆弧扫过的弧度

const sweepAngle = 1.2 * Math.PI;

let currentNum = that.data.currentNum

var centertext = 1500

var init = centertext / 4;

const leverText = [0, "" + (init * 1), "" + (init * 2), "" + (init * 3), "" + (init * 4), "" + (init * 5), "" + (init * 6), "" + (init * 7), "" + (init * 8), ];

// 信用等级

ctx.translate(this.data.canvasWidth / 2, this.data.canvasHeight * 3 / 4);

// 画内外圆弧

function drawRound() {

// 内圆

// 保存画布

ctx.save();

// 每次设置画笔时要调用这个beginPath，非则以最后一次为准。

ctx.beginPath();

// 设置画笔宽度

ctx.setLineWidth(sweepInWidth);

// 设置画笔颜色

ctx.setStrokeStyle('rgba(255, 255, 255, 0.2)')

// 画内圆弧形，角度为162度~378度，起始位置由于调用过ctx.translate(this.data.canvasWidth/2,this.data.canvasHeight*3/4);，所以在中心位置

ctx.arc(0, 0, radius, startAngle, endAngle);

// 描绘路径边框

ctx.stroke();

}

 

function drawScale() {

// 画刻度

const startNum = 300;

// 画布旋转弧度

const angle = 4.5 * Math.PI / 180;

ctx.save();

ctx.rotate((-1.5 * Math.PI) + startAngle)

for (let i = 0; i < 54; i++) {

if (i % 6 == 0) {

if (i / 6 < 5) {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#ED4F4F')

} else if (i / 6 >= 5 && i / 6 < 7) {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#37C0AB')

} else {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#FF8723')

}

ctx.fillText(leverText[i / 6] + "", 0, -radius + 18)

ctx.beginPath()

ctx.setLineWidth(1)

ctx.setStrokeStyle('white')

ctx.moveTo(0, -radius - sweepInWidth / 2);

ctx.lineTo(0, -radius + sweepInWidth / 2 + 1);

ctx.stroke()

} else {

if (i < 48) {

ctx.beginPath()

ctx.setLineWidth(1)

ctx.setStrokeStyle('white')

ctx.moveTo(0, -radius - sweepInWidth / 2);

ctx.lineTo(0, -radius + sweepInWidth / 2);

ctx.stroke()

}

}

ctx.rotate(angle)

}

// 还原画布

ctx.restore();

}

 

function drawIndicator() {

ctx.save();

let sweep = 2;

if (currentNum <= 300) {

sweep = 0;

} else if (currentNum <= 800 && currentNum > 300) {

sweep = (currentNum - 300) * sweepAngle / 600;

} else if (currentNum > 800 && currentNum <= 1000) {

sweep = (5 * sweepAngle / 6) + ((currentNum - 800) * sweepAngle / 1200);

} else {

sweep = sweepAngle;

}

 

// 画指示点圆弧

ctx.beginPath()

var center = startAngle + sweep + sweep * 0.5;

var rad = sweep + sweep * 0.5;

ctx.arc(0, 0, radius, startAngle, center);

ctx.setStrokeStyle('#ED4F4F')

ctx.setLineWidth(10)

ctx.stroke()

// // 画指示点圆弧

ctx.beginPath()

ctx.arc(0, 0, radius, center, center + rad / 2);

ctx.setStrokeStyle('#37C0AB')

ctx.setLineWidth(10)

ctx.stroke()

// // 画指示点圆弧

ctx.beginPath()

ctx.arc(0, 0, radius, center + rad / 2, center + rad);

ctx.setStrokeStyle('#FF8723')

ctx.setLineWidth(10)

ctx.stroke()

// 还原画布

ctx.restore();

}

 

//画指针 (-110 * Math.PI/180)-(110 * Math.PI/180)

function drawPoint() {

//左上的短线

var color;

ctx.save()

ctx.beginPath();

 

ctx.moveTo(0, -10)

ctx.lineTo(0, -radius + 20)

ctx.lineTo(0, -radius + 20)

// //左下的短线

ctx.lineTo(-10, -10)

ctx.lineTo(-6, 5)

var black=893

var angle = (centertext / 110)

if (black <= centertext) {

ctx.rotate(-(110 - black / angle) * Math.PI / 180)

var color = '#ED4F4F'

} else {

if (black > centertext && black < centertext * 1.5) {

var color = '#37C0AB'

} else {

var color = '#FF8723'

}

var data = (black - centertext)

ctx.rotate((data / angle) * Math.PI / 180)

}

ctx.setStrokeStyle(color)

ctx.setFillStyle(color)

 

ctx.fill()

ctx.stroke()

ctx.restore()

 

}

 

function drawCenterText() {

 

//设置文字画笔

ctx.save()

ctx.beginPath();

ctx.setFontSize(30)

ctx.setTextAlign('center')

ctx.setFillStyle('orange')

ctx.fillText(black, 0, radius / 2)

ctx.stroke()

ctx.restore()

 

}

// ctx.fillText("100")

//画红禄蓝的圆弧

drawIndicator();

// drawRound();

//画白色分割线

drawScale();

drawPoint();

drawCenterText();

 

ctx.draw()

},