上一篇svg绘制扇形,提到了canvas绘制,所以我这里记录一下
废话不多说,上代码:
createCanvas() {
// 创建一个canvas标签,你也可以在html直接插入,通过document.getElementById(id)的方式获取
this.ele = document.createElement('canvas');
// 设置canvas标签的 id 属性
this.ele.id = 'myCanvas'
// 设置canvas宽、高
this.ele.width = 100;
this.ele.height = 100;
// 创建一个canvas 2d画布
const cxt = this.ele.getContext('2d');
// 将中心点移动到50,50(圆心的位置)
cxt.translate(50, 50);
// 设置图形边框宽度
cxt.lineWidth = 1;
// 设置图形填充颜色
cxt.fillStyle = 'rgba(26, 98, 254, 0.5)'
// 设置边框颜色
cxt.strokeStyle = 'rgba(26, 98, 254, 1)'
// 这个函数名,根据项目需求命名的,大家忽略
this.createStation(cxt, this.fanList)
},
这里fanList是绘制多少个扇形的初始化数据,我贴一下数据结构
fanList: [
{angle: 60, dir: 0},
{angle: 60, dir: 120},
{angle: 60, dir: 240},
],
createStation是根据项目情况命名的,不必在意
createStation(cxt, fanList) {
// fanList为绘制多少个扇形的基础数据
fanList.forEach(t => {
// 计算扇形的方向
const dir = (t.dir - t.angle / 2) * Math.PI / 180;
this.drawFan(cxt, t.angle, dir);
})
},
扇形绘制方法放到一个函数drawFan方法里
drawFan(cxt, angle, dir) {
// 将上一次的画布保存起来
cxt.save()
// 重新开始绘制
cxt.beginPath();
// 画笔移动到0,0的位置,这里相对于上面的translate(50,50)
cxt.moveTo(0, 0);
// 当前扇形旋转角度,是为了调整扇形的方向
// 比如从0度开始画一个角度30度的扇形,但是这个扇形的中线指向的是15度方向
// 若指定方向为0度,则要选择-15度
// dir是计算后的角度
cxt.rotate(dir)
// 绘制弧线。0,0是圆心
// 49是半径,加上线宽1px,正好是50
// 第四个参数0,是起始角,以弧度计(弧的圆形的三点钟位置是 0 度)
// 第五个参数是结束角,以弧度计
cxt.arc(0, 0, 49, 0, (Math.PI / 180) * angle);
// 闭合路径
cxt.closePath();
// 填充图形
cxt.fill()
// 图形边框绘制
cxt.stroke()
// 恢复绘图起始点
// 不设置restore,画笔会以上一次结束位置为0度方向开始绘制
// 配合save使用,保证每次都是从3点钟方向计算绘图方式
cxt.restore()
},
很简单的步骤,注释有点多,请包涵。
贴个图:
如果对你有用,还请点个赞