小程序实现圆饼图

最新推荐文章于 2024-08-06 21:00:21 发布

Darren i

最新推荐文章于 2024-08-06 21:00:21 发布

阅读量2.6k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_43966635/article/details/104409829

版权

本文介绍了如何在小程序中实现圆饼图的绘制，主要利用了CanvasContext的createCircularGradient方法创建圆形渐变，并通过Canvas的基本绘制API完成图形。在实现过程中，需要注意arc函数中角度与弧度的转换。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

预备知识

CanvasContext.createCircularGradient(number x, number y, number r)
创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。（详细介绍
Canvas的基本绘制API

实现代码

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

function drawPie(canvas, anglesArray, circular, percent) {
   
  //画出饼状图
  var ctx = canvas;
  //颜色列表
  const color = [
    {
    start:'rgb(76, 197, 255)' , end:'rgb(81, 122, 255)'  },
    {
    start: 'rgb(38, 236, 1