<!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. VHDL之Aggregate

    Definition A basic operation that combines one or more values into a composite value of a record or ...

  2. JVM内存划分以及值传递和引用传递的区别

    Day05_SHJavaTraing_4-8-2017 一.JVM对自己的内存划分为5个区域    1.方法栈:所有的方法运行的时候进入内存    2.堆:存储的是容器和对象    3.方法和数据共享 ...

  3. (转）RabbitMQ学习之安装

    http://blog.csdn.net/zhu_tianwei/article/details/40832185 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客 ...

  4. 图片无损放大工具PhotoZoom如何进行打印设置

    我们使用PhotoZoom对照片进行无失真放大后,想将照片给打印出来需要设置一些常规参数时.那么这些参数我们该从哪里设置,怎么设置呢? PhotoZoom下载:pan.baidu.com/s/1cXb ...

  5. javaee的toString的用法

    toString方法返回该对象的字符串表示,如果不用toString则返回的是地址 package Xuexi; public class Person { private String name; ...

  6. Java导出Excel文件的两种方法

    将数据以Excel表格的形式导出:首先下载poi的jar包,导入项目中,或者使用maven仓库管理,在pom文件添加:<dependency>    <groupId>org. ...

  7. Spring AOP 介绍与基于接口的实现

    热烈推荐:超多IT资源,尽在798资源网 声明:转载文章,为防止丢失所以做此备份. 本文来自公众号:程序之心 原文地址:https://mp.weixin.qq.com/s/vo94gVyTss0LY ...

  8. 记一次vip视频破解过程（爱奇艺 芒果 腾讯 优酷 ）

    1. 在爱奇艺或者优酷中拿到视频的url地址.此时拿到的是加密地址(也可以直接在牛巴巴里面搜名字然后开f12跟踪路由) 2.进入牛巴巴vip视频解析网站.粘贴拿到的url.点击解析 3.f12在net ...

  9. Linux的环境中如何生成srw-rw---- 的文件权限？

    文件属性 d 开头是: 目录文件. l 开头是: 符号链接(指向另一个文件,类似于瘟下的快捷方式). s 开头是: 套接字文件(sock). b 开头是: 块设备文件,二进制文件. c 开头是: 字符 ...

  10. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...