canvas画饼图

た入场券 2023-06-11 14:25 21阅读 0赞

<style>  
body \{  
    background: black;  
    text-align: center;  
\}  
\#cans \{  
    background: white;  
\}  
</style>

<script>  
function disToRad(n)\{//将度数表示弧度计算的方法  
return n\*Math.PI/180;//π用PI表示，π=180°，所以1°=PI/180  
\}  
  
window.οnlοad=function()\{  
    let cans=document.getElementById("cans");//获取画布  
    let ctx=cans.getContext("2d");//创建画板  
    let cx=300;//设置x轴初始位置坐标(即圆的中心坐标)  
    let cy=200;//设置y轴初始位置坐标(即圆的中心坐标)  
    let r=150;//半径

function pie(startAng,endAng,color)\{//创建一个画扇形的方法  
         let nx,ny;//x轴初始位置坐标  
         ctx.beginPath();//防止之前画好的部分受后面画的影响  
         ctx.moveTo(cx,cy);//画笔开始坐标(即圆的中心坐标)  
         nx=cx Math.sin(disToRad(startAng))\*r;//弧线初始点的x轴坐标  
         ny=cy-Math.cos(disToRad(startAng))\*r;  
         ctx.lineTo(nx,ny);//设置终点坐标（弧线初始点坐标）  
         ctx.arc(cx,cy,r,disToRad(startAng-90),disToRad(endAng-90),false);//画扇形，弧度=度数-90  
         ctx.closePath();//图形闭合  
         ctx.stroke();//描边  
         ctx.fillStyle=color;//设置填充颜色  
          ctx.fill();//填充  
    \}

var data=\[10,30,35,20,5\];//表示度数的数组  
    let color=\['red','green','yellow','blue','orange'\];//表示颜色的数组  
    let sum=data.reduce(function(prev,current)\{  
        return prev current;//求总和  
     \})  
    let avgDegree=data.map(function(item)\{  
        return item/sum\*360;//转换为角度  
    \})  
   lastDegree=0;//设置初始度数  
  avgDegree.forEach(function(item,index)\{  
      pie(lastDegree,lastDegree item,color\[index\]);//调用pie(),的分别循环换获取startAng,endAng,color  
      lastDegree =item;  
   \})

\}

</script>

<body>  
<canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>  
</body>

效果如图：![1233953-20180315111917363-178458864.jpg][]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1233953-20180315111917363-178458864.jpg]: /images/20230531/dbdfc8a38466447b92d13890abed0cb1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas饼状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 09:51/ 0 赞/ 27 阅读

相关 canvas画饼图

<style> body \{ background: black; text-align: center; \} \cans \{

た入场券/ 2023年06月11日 14:25/ 0 赞/ 22 阅读

相关 matplotlib画直方图和饼状图

> 文章最前：我是Octopus，这个名字来源于我的中文名--章鱼；我热爱编程、热爱算法、热爱开源。所有源码在我的个人[github][] ；这博客是记录我学习的点点滴滴，如

快来打我*/ 2023年06月06日 08:17/ 0 赞/ 61 阅读

相关 Python高效画饼图

简述帮助朋友来做一个画饼图的任务，给了一系列数据，然后画出饼图。理论上来讲应该是很快速的，而且这个任务也很简单。但是存在一些小的坑，总是需要我查找以前的做的东

我就是我/ 2023年02月23日 08:24/ 0 赞/ 35 阅读

相关 matplotlib画饼图

import matplotlib as mpl import matplotlib.pyplot as plt 生成数据 labe

待我称王封你为后i/ 2023年01月17日 07:58/ 0 赞/ 271 阅读

相关 python画饼状图

python画饼状图 -------------------- 文章目录 python画饼状图前言一、引入matplotlib库二、

╰半夏微凉°/ 2022年10月23日 14:28/ 0 赞/ 286 阅读

相关 echarts如何画一个空心的饼图

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述当我们学习echarts时，教程里面有画饼图的源代码，但那些饼图都是实心的，我们

青旅半醒/ 2022年08月28日 14:41/ 0 赞/ 218 阅读

相关 ie上画圆饼图

概述主要运用到CSS3的transform、js、jq实现饼状图效果详细代码下载：[http://www.demodashi.com/demo/10579

迷南。/ 2022年05月31日 08:47/ 0 赞/ 220 阅读

相关利用canvas绘制饼状图

代码中有注释，就不多说了很容易看明白 var canvas = document.getElementById('canvas'); canvas.w

朱雀/ 2021年07月24日 21:18/ 0 赞/ 706 阅读

相关 canvas绘制饼图的方法介绍(代码)

canvas绘制饼图的方法介绍(代码) 一. 任务说明使用原生`canvasAPI`绘制饼图（南丁格尔玫瑰）。（截图以及数据来自于百度Echarts官方示例库【查看示例...

小灰灰/ 2020年06月09日 11:45/ 0 赞/ 899 阅读