<!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. QS之vsim

    vsim - The vsim command invokes the VSIM simulator -L <library_name> … (optional) Specifies th ...

  2. swift的计算属性和懒加载

    计算属性每次都重新计算. 懒加载只计算一次. 可以借助backing store将计算属性转化为懒加载属性. 计算属性实质上退化为函数调用. 计算属性的标示是get.set.

  3. 换个语言学一下 Golang （2）——基础语法

    Go 标记 Go 程序可以由多个标记组成,可以是关键字,标识符,常量,字符串,符号.比如下面的hello world就是由 6 个标记组成: 行分隔符 在 Go 程序中,一行代表一个语句结束.每个语句 ...

  4. 如何把数值或者对象添加到ArrayList集合

    生成6个1~33之间的随机整数,添加到集合,并遍历 public class ArrayListDemo1 { public static void main(String[] args) { // ...

  5. CentOS6.5 静默安装Oracle 11g过程中提示：Exception in thread “main” java.lang.NoClassDefFoundError

    原来是系统中设置了DISPLAY环境变量,执行: [oracle@qa26 database]$ ./runInstaller  -silent -responseFile /usr/local/or ...

  6. python与图灵机器人交互(WXPY版本)

    开发者账号:wujunfeng , 开发者key:官网申请  #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/ ...

  7. 小白学习Spark系列一：Spark简介

    由于最近在工作中刚接触到scala和Spark,并且作为python中毒者,爬行过程很是艰难,所以这一系列分为几个部分记录下学习<Spark快速大数据分析>的知识点以及自己在工程中遇到的小 ...

  8. IOS开发：使用lipo合并armv7,i386,armv7s库文件

    假设多个版本的lib分别是 libxxx.armv7.a , libxxx.armv7s.a, libxxx.i386.a我们的目标是 把他们合并成超级通用版的libxxx.a  打开命令行 Term ...

  9. Fastdfs环境搭建

    环境准备 使用的系统软件 名称 说明 centos 7.x libfatscommon FastDFS分离出的一些公用函数包 FastDFS FastDFS本体 fastdfs-nginx-modul ...

  10. 【AIM Tech Round 5 (rated, Div. 1 + Div. 2) B】Unnatural Conditions

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让a+b的和为100000000...0这样的形式就好了 这样s(a+b)=1<=m就肯定成立了(m>=1) 然后至于s ...