/** * 双环形图 * * @author hanyaolong */ export class SCircle { /** * 构造函数 * * @param {canvasid} id */ constructor(id) { const canvas = document.getElementById(id); this.ctx = canvas.getContext("2d"); this.percent = 100; //最终百分比 this.circleX = canvas.width / 2; //中心x坐标 this.circleY = canvas.height / 2; //中心y坐标 this.radius = 60; //圆环半径 this.lineWidth = 5; //圆形线条的宽度 this.fontSize = 40; //字体大小 } /** * 绘制圆 * * @param {x} cx * @param {y} cy * @param {半径} r */ circle(cx, cy, r) { this.ctx.beginPath(); this.ctx.lineWidth = this.lineWidth; this.ctx.strokeStyle = '#2a4886'; this.ctx.arc(cx, cy, r, 0, (Math.PI * 2), true); this.ctx.stroke(); } /** * 设置中心文字 * * @param {文本} text */ setText(text) { this.ctx.beginPath(); //中间的字 this.ctx.font = this.fontSize + 'px April'; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'middle'; this.ctx.fillStyle = '#ffffff'; this.ctx.fillText(text, this.circleX, this.circleY); this.ctx.stroke(); this.ctx.beginPath() this.ctx.font = this.fontSize / 3 + 'px April'; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'middle'; this.ctx.fillStyle = '#ffffff'; this.ctx.fillText("本月总任务", this.circleX, this.circleY + this.fontSize * 3 / 4); this.ctx.stroke(); } /** * 绘制圆弧 * * @param {x} cx * @param {y} cy * @param {半径} r */ sector(cx, cy, r,endAngle) { this.ctx.beginPath(); this.ctx.lineWidth = this.lineWidth; this.ctx.strokeStyle = '#c81d39'; //圆弧两端的样式 this.ctx.lineCap = 'round'; this.ctx.arc( cx, cy, r, (Math.PI * -1 / 2), (Math.PI * -1 / 2) + endAngle / 100 * (Math.PI * 2), false ); this.ctx.stroke(); } /** * 初始化 * * @param {x} x * @param {y} y * @param {半径} r */ init(x, y, r) { //清除canvas内容 this.ctx.clearRect(0, 0, x * 2, y * 2); this.circle(x, y, r); this.circle(x, y, r * 1.2); } /** * 设置百分比 * * @param {内环百分比(100最大)} p1 * @param {外环百分比(100最大)} p2 */ setPersent(p1, p2) { this.init(this.circleX, this.circleY, this.radius); //圆弧 this.sector(this.circleX, this.circleY, this.radius, p1); this.sector(this.circleX, this.circleY, this.radius * 1.2,p2); } }