Canvas绘制饼图，不同区域填充不同颜色

最新推荐文章于 2024-08-16 13:20:36 发布

念雅

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_43865681/article/details/118024877

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

Canvas绘制饼图，不同区域填充不同颜色

一、核心代码，注意执行顺序：

beginPath()、fillStyle = ‘色值’、fill()、closePath()，

二、代码

<!DOCTYPE html>
<html>
<head>
 <script type="application/javascript">
   function draw() {
     let canvas = document.getElementById("canvas");
     if (canvas.getContext) {
       let ctx = canvas.getContext("2d");
       //计算圆心坐标
       let x0 = ctx.canvas.width/2;
       let y0 = ctx.canvas.height/2;

       //把角度转化成弧度
       function rad(angle){
         return (2*Math.PI/360)*angle
       }

       //开启新路径
       ctx.beginPath();
       //将画笔移动到画布中央
       ctx.moveTo(x0,y0);
       //填充颜色
       ctx.fillStyle = '#5470c6';
       //ctx.arc(x0,y0,r，起始弧度，结束弧度)；
       //一个圆的总弧度是2*π Math.PI可以获取π的值
       ctx.arc(x0,y0,150,rad(0),rad(150));
       //填充
       ctx.fill()
       //描边(有半径)
       ctx.stroke()
       //关闭路径
       ctx.closePath();

       ctx.beginPath();
       ctx.moveTo(x0,y0);
       //填充颜色
       ctx.fillStyle =  '#ee6666';
       ctx.arc(x0,y0,150,rad(150),rad(260));
       //填充
       ctx.fill()
       //描边(有半径)
       ctx.stroke()
       //关闭路径
       ctx.closePath();

       ctx.beginPath();
       ctx.moveTo(x0,y0);
       //填充颜色
       ctx.fillStyle = '#fac858';
       ctx.arc(x0,y0,150,rad(260),rad(350));
       //填充
       ctx.fill()
       //描边(有半径)
       ctx.stroke()
       //关闭路径
       ctx.closePath();
     }
   }
 </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="1500" height="1050"></canvas>
</body>
</html>