<!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. map参数值取代

    public static String processTemplate(String tpl, Map<String, ?> params){ Iterator<String> ...

  2. element-ui Cascader 级联选择器示例

    <html> <head>test</head> <style> @import url("http://unpkg.com/element- ...

  3. QT4.8界面设计（MSVC2010X）

    1.C++ IDE设计 MFC这种半死不活的windows C++平台已经被抛弃,很无奈.转向Qt的C++还是不错的选择. QT的QML才是最新的亮点,可惜没有时间经历这些东西了. 2.程序代码 2. ...

  4. AngularJS指令进阶 -- ngModelController详解

    大家都知道AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方.这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel的controller来做双向数据绑定,本文对 ...

  5. 优动漫PAINT发展历程和主要功能

    优动漫PAINT也就是我们常说的clip studio paint(CSP)的中文版本,它是一款功能强大的动漫绘图软件.经过五年的成长,优动漫PAINT经历了从青涩到成熟的发展过程,随着软件更多功能的 ...

  6. PuTTY 命令行改进 有效解决 中文乱码

    PuTTY  是一个免费且跨平台的并支持SSH和Telnet 的客户端, 包括xterm 终端模拟器. 它由Simon Tatham 编写并维护. http://www.chiark.greenend ...

  7. 路飞学城Python-Day142

    第2节:UA身份伪装 反爬机制 User-Agent:请求载体的身份标识 通过不同的手段的当前的请求载体是不一样的,请求信息也是不一样的,常见的请求信息都是以键和值的形式存在 浏览器的开发者工具 Ne ...

  8. Linux下挂载分区 （本人实例）

    设置分区开机自动挂载 要在/etc/fstab里设置一行 把上面空格去掉就行了

  9. assound.conf

    pcm.!dmix {type dmixipc_key 5678293ipc_key_add_uid yesslave {pcm "hw:0,0"period_time 0peri ...

  10. indy10中idtcpclient的使用问题[和大华电子称数据交换]

    在实际事务应用中,多次打开server进行大写.其中遇到一些问题,由于时间关系,没有好好整理,虽然问题解决了, 但原因和其他方法没有去进一步测试. 1.每个单元用本地TidTCPClient变量连接s ...