php画圆盘,用Canvas画个圆盘

需求的来源通常是工作，这次要完成功能核心是一个向量图，嗯...其实就是一个定制化的仪表盘，换做平时一个上午就能搞定，只要数据给到顺手测试了就交货，但这次却有些不一样，这次要完成的，是一个微信小程序。嗯，小程序有什么不同呢？答案是小程序没有好用的仪表盘插件库，网上搜了一下感觉都不太符合需求，没法子只能自己手动搞一个，但没关系，我甚至还有一点点激动，因为可以乘机玩一下Canvas。

需求及目标

这里绘制一个半径RADIUS = 300的外圆，为了实验我将用常规的Web代码编写。最终完成品如下。

向量图

解决的问题

目标清晰了，就大概知道怎么走了。从图中可以看出整个图就是一个表盘+表针的表现形式，细节在于表盘和表针的样式，接下来我们一一分析

1. 表盘的制作

可以看到表盘的中心是空的，圆边有刻度线，且还有相应的刻度标识。那么问题来了：

如何让表盘的中心看起来像空？这个问题很简单，画两个圆即可。首先画外圆，选择填充样式，具体代码如下

ctx.translate(RADIUS, RADIUS); //坐标原点

ctx.beginPath();

ctx.arc(0, 0, RADIUS - 2, 0, 2 * PI); //绘制圆

ctx.strokeStyle = '#3F51B5'; //边框样式

ctx.fillStyle = '#EEEEEE'; //填充样式

ctx.fill();

ctx.stroke();

ctx.closePath();

其次在外圆的基础上绘制一个空白的内圆，效果便出来了

ctx.beginPath();

ctx.arc(0, 0, RADIUS * 2 / 3, 0, 2 * PI); //绘制圆

ctx.strokeStyle = '#3F51B5';

ctx.fillStyle = '#fff';

ctx.fill()

ctx.stroke();

ctx.closePath();

基础空心圆

如何画刻度线？

一个圆有360°，也就是说要在圆弧上标上360个刻度(废话)。这里需要的做法是每画一个刻度则旋转一度，但这里要注意，rotate(deg)需要传入的是弧度，所以需要做一个转化。但首先，弧度的概念了解一下：

来自维基百科的弧度定义

可以从上面推出，假设我们要旋转一度，则需要做如下操作ctx.rotate((PI / 180 * i) - (PI / 2));。另外需要注意的一个点，每次对画布改变状态之前都要调用save()方法，保存上一帧的画面，待操作完毕后调用restore()恢复，刻度代码如下

//表盘刻度

for (let i = -180; i < 180; i++) {

ctx.save();

ctx.rotate((PI / 180 * i) - (PI / 2)); //旋转坐标轴

if (i % 20 === 0) {

ctx.fillText(-i, RADIUS - 40, 0); //每20个刻度打上刻度标签

}

ctx.beginPath();

ctx.moveTo(RADIUS - 17, 0);

ctx.lineTo(RADIUS - 7, 0);

ctx.lineWidth = (i % 20) !== 0 ? 1 : 2; //每20个指针加粗一次

ctx.strokeStyle = (i % 20) !== 0 ? '#BDBDBD' : '#2196F3';

ctx.stroke();

ctx.closePath();

ctx.restore();

}

最终效果如下：

表盘

2. 指针的制作

用canvas画一根线是不难的，一个路径API调用就可以了，但是，要怎么画一个有箭头的线呢？这个想法其实不难，就是通过在线末端画多两根线就好了，难点在于怎么确定箭头两个线的坐标及角度的问题，这里就需要用到三角函数来定位了。具体可参考这篇教程

3. 跟随数据的转动

……这个在有需要的时候调用该函数就可以了，比如在我自己的项目中，我需要根据数据的变动来调整，则在请求数据后调用该方法即可

完整代码

const canvas = document.getElementById('chart');

const ctx = canvas.getContext('2d');

const PI = Math.PI;

const RADIUS = 300; //半径

/**

* 渲染表盘

* @param {CanvasRenderingContext2D} ctx

*/

function renderDial(ctx) {

ctx.clearRect(0, 0, RADIUS * 2, RADIUS * 2);

ctx.save();

//外圆定中心

ctx.translate(RADIUS, RADIUS); //坐标原点

ctx.beginPath();

ctx.arc(0, 0, RADIUS - 2, 0, 2 * PI); //绘制圆

ctx.strokeStyle = '#3F51B5';

ctx.fillStyle = '#EEEEEE'

ctx.fill();

ctx.stroke();

ctx.closePath();

//内圆

ctx.beginPath();

ctx.arc(0, 0, RADIUS * 2 / 3, 0, 2 * PI); //绘制圆

ctx.strokeStyle = '#EEEEEE';

ctx.fillStyle = '#fff';

ctx.fill()

ctx.stroke();

ctx.closePath();

//中心点

ctx.beginPath();

ctx.arc(0, 0, 10, 0, 2 * PI);

ctx.fillStyle = '#000';

ctx.fill()

ctx.closePath();

//表盘刻度

for (let i = -180; i < 180; i++) {

ctx.save();

ctx.rotate((PI / 180 * i) - (PI / 2)); //旋转坐标轴

if (i % 20 === 0) {

ctx.fillText(-i, RADIUS - 40, 0);

}

ctx.beginPath();

ctx.moveTo(RADIUS - 17, 0);

ctx.lineTo(RADIUS - 7, 0);

ctx.lineWidth = (i % 20) !== 0 ? 1 : 2; //每20个指针加粗一次

ctx.strokeStyle = (i % 20) !== 0 ? '#BDBDBD' : '#2196F3';

ctx.stroke();

ctx.closePath();

ctx.restore();

}

ctx.restore();

}

/**

* 渲染表针

* @param {CanvasRenderingContext2D} ctx

*/

function renderHands(ctx, angleA, angleB, angleC) {

//角度转化成弧度

let angle = PI / 180 * angleA;

let angle1 = PI / 180 * angleB;

let angle2 = PI / 180 * angleC;

// drawHand(angle, 250, 5, '#2196F3', ctx)

drawArrow(ctx, angle, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'A')

drawArrow(ctx, -angle1, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'B')

drawArrow(ctx, -angle2, RADIUS * 5 / 6, 5, 15, 20, '#2196F3', 'C')

}

/**

* 渲染表针

* @param {CanvasRenderingContext2D} ctx

* @param {Number} angle 弧度

* @param {Number} len 线长

* @param {Number} width 线宽度

* @param {Number} theta 三角斜边 —— 直线夹角

* @param {Number} headlen 三角斜边长度

* @param {String} color 线条颜色

*/

function drawArrow(ctx, angle, len, width, theta, headlen, color, text) {

let arrowAngle = Math.atan2(0, len) * 180 / Math.PI,

angle1 = (arrowAngle + theta) * PI / 180,

angle2 = (arrowAngle - theta) * PI / 180,

topX = headlen * Math.cos(angle1),

topY = headlen * Math.sin(angle1),

botX = headlen * Math.cos(angle2),

botY = headlen * Math.sin(angle2);

ctx.save();

ctx.translate(RADIUS, RADIUS);

ctx.rotate(-Math.PI / 2 + angle);

ctx.beginPath();

let arrowX = -4 - topX,

arrowY = 0 - topY;

// ctx.moveTo(arrowX, arrowY);

/* 绘制直线 */

ctx.moveTo(-4, 0);

ctx.lineTo(len, 0);

arrowX = len - topX;

arrowY = topY;

ctx.moveTo(arrowX, arrowY);

ctx.lineTo(len, 0);

arrowX = len - botX;

arrowY = botY;

ctx.lineTo(arrowX, arrowY);

ctx.strokeStyle = color;

ctx.lineWidth = width;

ctx.stroke();

ctx.closePath();

ctx.restore()

ctx.save();

ctx.translate(RADIUS, RADIUS)

ctx.rotate(-Math.PI / 2 + angle);

ctx.translate(len - 50, 0);

ctx.rotate(90 * Math.PI / 180);

ctx.font = '16px bold sans-serif'

ctx.fillText(text, -20, -10);

ctx.restore();

}

renderDial(ctx)

renderHands(ctx, 0, -120, 120);