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. UniTask入门指南:简化Unity中的异步编程

    UniTask入门指南:简化Unity中的异步编程 介绍: UniTask是一个轻量级.高性能的异步编程库,专门针对Unity开发进行了优化.与Unity标准的Task系统相比,UniTask提供了更 ...

  2. Freertos学习：00-介绍

    --- title: rtos-freertos-000-介绍 EntryName: rtos-freertos-00-about date: 2020-06-09 23:21:44 categori ...

  3. 全新 UI 震撼来袭！ng-matero v18 正式发布！

    前言 断断续续折腾了近两周,ng-matero v18 终于发布了.其中最大的亮点是启用 Material 3 主题以及全新的 UI 设计.特别说明,这是 ng-matero 发布五年以来首次 UI ...

  4. windows server + iis 部署若伊前端vue项目

    一.背景说明 工作原因,一直使用若伊前后端分离版框架进行二次开发.客户的服务器多数为windows server系统,少部分为linux系统.过去一直是使用nginx进行前端的部署,nginx的代理功 ...

  5. redis基本数据结构-有序集合

    redis基本数据结构-有序集合zset 特性 使用哈希表+跳表数据结构存储 每个元素由 分数和字段名 两部分组成 增加元素 zadd key score1 member1 [score2 membe ...

  6. Nginx使用upstream实现动静分离

    一.为什么要进行动静分离 分离资源,减少不必要到的请求消耗,减少请求延时. 注:我这里,是nginx处理静态资源,apache处理动态资源. 场景分析: 1.未分离之前的场景步骤 (1)客户端请求ur ...

  7. [oeasy]python0109_tty_打字头_电传打字机_字模_点阵字库

    点阵字库 回忆上次内容 上次回顾了 字符字型 的 进化过程 从 谷腾堡 活字 到 罗马正字 和 意大利斜体   罗马帝国战斗力的征服 和 基督教文化传播 使得 拉丁字符 在日耳曼语地区广泛传播 种葡萄 ...

  8. oeasy教您玩转vim - 79 - # 编码格式encoding

    ​ ​ - `help encoding-name` ​ ![图片描述](https://s4.51cto.com/images/blog/202201/03083053_61d243bd719358 ...

  9. Pandas库学习笔记（1）

    参考:菜鸟教程 pandas库使用了NumPy的大多数功能.建议您先阅读有关NumPy的教程,然后再继续本教程. Pandas 适用于处理以下类型的数据: 与 SQL 或 Excel 表类似的,含异构 ...

  10. vue小知识~ref和$refs

    $refs表示的是获取被ref标识的标签的DM实例. 用法简单: 标签上: <div ref='refName'></div> 获取: this.$refs.refName 就 ...