<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="c"></canvas>

    <script>

        var cv = document.getElementById("c");

        var ctx = cv.getContext("2d");

        cv.width = 600;

        cv.height = 400;

        cv.style.border = "1px solid #000";

        // 角度转弧度

        function toRadian(angle) {

            return angle / 180 * Math.PI;

        }

        // 弧度转角度

        function toAngle(radian) {

            return radian / Math.PI * 180;

        }

           // 绘制饼型图（三等分）

           var x0 = 200, y0 = 200,

               radius = 100,

               startAngle = -90,

               step = 120;

           // 线绘制第一个扇形

           // 基本方式

           // ctx.fillStyle = "red";

           // ctx.moveTo(x0, y0);

           // ctx.arc(x0, y0, radius, toRadian(startAngle), toRadian(-90 + 120));

           // ctx.fill();

           // ctx.beginPath();

           // ctx.fillStyle = "green";

           // ctx.moveTo(x0, y0);

           // ctx.arc(x0, y0, radius, toRadian(-90 + 120), toRadian(30 + 120));

           // ctx.fill();

           // ctx.beginPath();

           // ctx.fillStyle = "blue";

           // ctx.moveTo(x0, y0);

           // ctx.arc(x0, y0, radius, toRadian(30 + 120), toRadian(150 + 120));

           // ctx.fill();

           var colors = ["red", "green", "blue"];

           colors.forEach(function(value, index) {

               ctx.beginPath();

               ctx.fillStyle = value;

               ctx.moveTo(x0, y0);

               ctx.arc(x0, y0, radius, toRadian(startAngle), toRadian(startAngle+=step));

               ctx.fill();

           });

           // ctx.closePath();

           // ctx.stroke();

           // 绘制扇形

           // 1 moveTo 到圆形

           // 2 绘制圆弧

           // 3 如果是 fill 这时候扇形就绘制完毕了

           //      如果是 stroke ，最简单的处理方式： closePath();

    </script>

</body>

</html>

canvas绘制三等分饼型图的更多相关文章

  1. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  2. 用canvas 绘制的饼状统计图、柱状统计图、折线统计图

    canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图

  3. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  4. canvas+js画饼状图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  6. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

  7. 绘制matplotlib 饼状图

    参考:https://blog.csdn.net/ScarlettYellow/article/details/80458797 (2)2016年就业人员在三次产业中分布的饼状图. def swap( ...

  8. canvas绘制饼型图

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

  9. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

随机推荐

  1. 完整安装sqlserver always on集群

    准备工作 1.  四台已安装windows server 2008 r2 系统的虚拟机,配置如下: CPU : 1核 MEMORY : 2GB DISK : 40GB(未分区) NetAdapter ...

  2. 改造PAXOS算法消灭活锁

    分布式一致性协议的目的是确定一个不可变变量分布式存储的取值:通过对国内外一致性算法的研究成果和PAXOS协议活锁的分析,发现引入一个角色作为竞争时的代理提交者就可以解决活锁问题,从而在本文引入“代理提 ...

  3. C++目录遍历：使用第三方库boost.filesystem等

    1. opencv 目录文件遍历 注释:2014 0814 这个代码是基于java的,Java使用托管代码进行目录管理,C++就不那么跨平台了. 原文链接:http://blog.csdn.net/z ...

  4. SVN冲突出现原因及解决方法浅谈

    缘由 很简单,用svn合base,出现了各种各样奇怪的问题,虽然最终没有造成什么大的线上问题,但过程也是曲折的,耗费个人精力,也占用他人资源,不好不好,一点都不佛系. 究其原因,还是对为什么出现各种冲 ...

  5. 基准测试-jmeter压力测试activeMQ之一环境安装配置

    jmeter压力测试activeMQ 摘要:linux(CentOS)单机activeMQ安装.window(2008Server)Jmeter配置activeMQ包.Jmeter配置linux监控 ...

  6. Multitier architecture-n-tier architecture

    In software engineering, multitier architecture (often referred to as n-tier architecture) or multil ...

  7. CorelDRAW X8超低价优惠啦，你却还在用CDR X4破解？！

    最近大火的<都挺好> 已经完美收官 出于好奇,小编也正在追剧呢 同样出生在畸形的原生家庭 长大后 有钱就是苏明玉 没钱就是樊胜美 所以不要抱怨老天给了你怎样的资源 想要什么就要靠自己的双手 ...

  8. 报错The jarsigner could not be found. Make sure to run with the build with a JDK。的解决方法

    这种报错是因为eclipse启动时没有走你设置的jdk路径,eclipse走的路径/bin下没有jarsigner.exe.所以报错,解决办法: 指定eclipse启动jdk 按住alt键,用鼠标拖动 ...

  9. CentOS 笔记（二） 端口占用，进程查看

    ①查看当前端口情况 netstat -nultp ②查看当前进程情况 ps -ef ps -ef|grep dotnet ③强制kill 进程 kill -9 [PIN]

  10. 【POJ】3122 Pie [二分查找]

    题目地址:http://poj.org/problem?id=3122 二分每块饼的体积.为了保证精度,可以先二分半径的平方r*r,最后再乘以PI.要注意一点,要分的人数要包括自己,及f+1. #in ...