1 <!DOCTYPE html>

 2 <html lang="en">

 3   <head>

 4     <meta charset="UTF-8" />

 5     <title>18-Canvas绘制饼状图</title>

 6     <style>

 7       * {

 8         margin: 0;

 9         padding: 0;

10       }

11       canvas {

12         display: block;

13         margin: 0 auto;

14         background: red;

15       }

16     </style>

17   </head>

18   <body>

19     <canvas width="500" height="400"></canvas>

20     <script>

21       // 1.拿到canvas

22       let oCanvas = document.querySelector("canvas");

23       // 2.从canvas中拿到绘图工具

24       let oCtx = oCanvas.getContext("2d");

25

26       // 1.计算圆心的位置

27       let rx = oCtx.canvas.width / 2;

28       let ry = oCtx.canvas.height / 2;

29

30       // 2.绘制第一个扇形

31       // oCtx.moveTo(rx, ry);

32       // oCtx.arc(rx, ry, 100, 0, Math.PI/2);

33       // oCtx.fillStyle = randomColor();

34       // oCtx.fill();

35

36       // 3.绘制第二个扇形

37       // oCtx.beginPath();

38       // oCtx.moveTo(rx, ry);

39       // oCtx.arc(rx, ry, 100, Math.PI/2, Math.PI);

40       // oCtx.fillStyle = randomColor();

41       // oCtx.fill();

42

43       // 4.绘制第三个扇形

44       // oCtx.beginPath();

45       // oCtx.moveTo(rx, ry);

46       // oCtx.arc(rx, ry, 100, Math.PI, Math.PI + Math.PI/2);

47       // oCtx.fillStyle = randomColor();

48       // oCtx.fill();

49

50       // 5.绘制第四个扇形

51       // oCtx.beginPath();

52       // oCtx.moveTo(rx, ry);

53       // oCtx.arc(rx, ry, 100, Math.PI + Math.PI/2, Math.PI * 2);

54       // oCtx.fillStyle = randomColor();

55       // oCtx.fill();

56

57       let startAngle = 0;

58       for (let i = 1; i <= 4; i++) {

59         let endAngle = (i * Math.PI) / 2;

60         oCtx.beginPath();

61         oCtx.moveTo(rx, ry);

62         oCtx.arc(rx, ry, 100, startAngle, endAngle);

63         oCtx.fillStyle = randomColor();

64         oCtx.fill();

65         startAngle = endAngle;

66       }

67

68       function randomColor() {

69           let r = Math.floor(Math.random() * 256);

70           let g = Math.floor(Math.random() * 256);

71           let b = Math.floor(Math.random() * 256);

72           return `rgb(${r},${g},${b})`;

73       };

74

75

76

77       //   定时器返回数据

78       //   function qwe(a) {

79       //     console.log(a);

80       //   }

81

82       //   function dsd() {

83       //     setInterval(() => {

84       //       let qwer = 1;

85       //       qwe(qwer);

86       //     }, 1000);

87       //   }

88       //   dsd();

89     </script>

90   </body>

91 </html>

18-canvas绘制饼状图的更多相关文章

  1. 第166天：canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 使用canvas绘制饼状图

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

  4. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  5. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  6. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  7. canvas绘制饼型图

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

  8. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  9. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  10. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

随机推荐

  1. uniapp 开发微信小程序 使用微信小程序一键登录

    研究了一天的uniapp开发微信小程序的第一步,登录! 刚开始使用uni.getUserInfo函数No!不行,无法运行,研究文档发现是这个函数被微信小程序团队给禁用了,OK换! 后来换成了uni.g ...

  2. Linux高级命令

    重定向 重定向也称为输出重定向,用于将命令的输出保存到目标文件. 使用方法:> 文件名 或 >> 文件名.前者会覆盖文件内容,后者会追加内容到文件. 查看文件内容命令 cat: 显示 ...

  3. 「C++」复杂模拟【壹】

    建议开启目录食用 阅读本文之前建议您先看这里,如果您已经看完了,那么就可以放心大胆的学习本文了. 我认为其实本文的难度还是比较大的,今天我们题是来自山东省省选,所以建议大家谨慎阅读,如果您是专业程序员 ...

  4. 架构师必知的11种API性能优化方法

    前言 接口性能优化是后端开发人员经常碰到的一道面试题,因为它是一个跟开发语言无关的公共问题. 这个问题既可以很简单,也可以相当复杂. 有时候,只需要添加一个索引就能解决. 有时候,代码需要进行重构. ...

  5. Prometheus监控系统（三）Prometheus与Grafana集成

    1. Prometheus和Grafana集成 Grafana是一款采用Go语言编写的开源应用,主要用于大规模指标数据的可视化展现,是网络架构和应用分析中最流行的时序数据展示工具.目前已支持绝大部分常 ...

  6. Android ADB命令集锦

    Android ADB命令集锦 原文(有删改):https://blog.csdn.net/dianziagen/article/details/57400723 本文包括: adb基本指令 Shel ...

  7. JpaRepository：Paging query needs to have a Pageable parameter! Offending method public abstract

    在练习 Spring Data JPA 时,使用分页接口 Pageable 查询数据,接口实现后,运行报错: Paging query needs to have a Pageable paramet ...

  8. 面试官：Java线程可以无限创建吗?

    哈喽,大家好,我是世杰. 本次给大家介绍一下操作系统线程和Java的线程以及二者的关联 1. 面试连环call Java线程可以无限创建吗? Java线程和操作系统线程有什么关联? 操作系统为什么要区 ...

  9. 洛谷P1790

    这道题可以说也是非常有意思的数学题,并且坑点也是非常多 刚开始以为是连通块的问题,后面发现没有那么简单,因为必须要分成两个部分才行,连通块可能会分成三个部分 后面想到利用割痕来解决,以为唯一的一种分割 ...

  10. 从基础到高级应用，详解用Python实现容器化和微服务架构

    本文分享自华为云社区<Python微服务与容器化实践详解[从基础到高级应用]>,作者: 柠檬味拥抱. Python中的容器化和微服务架构实践 在现代软件开发中,容器化和微服务架构已经成为主 ...