Canvas画个饼图

作者：陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	canvas
	{
		border: 1px solid #ccc;
		width: 700px;
		height: 400px;
	}
</style>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
	<script type="text/javascript">
	window.onload=function()
	{
		//arc的属性：圆心的x，圆心的y点。圆的半径，开始的弧度(弧度是角度*Math.PI/180), 结束的弧度（弧度是角度*Math.PI/180）, 是否逆时针默认是顺指针false.三点看成0度，六点看成90度，九点看成180度，12点看成270度。又返回三点看成360度
		var oCanvas=document.querySelector('canvas');//获取canvas对象
		oGc=oCanvas.getContext('2d');//2d类型做图
		oGc.beginPath();//开始路径
		oGc.moveTo(300,200);//开始点是xzhou300，yzhou200
		oGc.arc(300,200,100,0,120*Math.PI/180,false);
		oGc.fillStyle='red';//颜色为红色
		oGc.fill();//填充（下面以此类推）
		oGc.beginPath();//重新做图，颜色不一样的哦。因为重新开了一条路径
		oGc.moveTo(300,200);
		oGc.arc(300,200,100,120*Math.PI/180,240*Math.PI/180,false);
		oGc.fillStyle='blue';
		oGc.fill();
		oGc.beginPath();
		oGc.moveTo(300,200);
		oGc.arc(300,200,100,240*Math.PI/180,360*Math.PI/180,false);
		oGc.fillStyle='yellow';
		oGc.fill();
	}
	
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在这里插入图片描述

相关阅读:
解放人与设备距离，5G时代的远程操控该如何完成
基于偏好的球形修剪多目标差分进化算法（Matlab代码实现）
GoLand软件编码区中出现英文输入异常解决方法
Zabbix
探索游戏公司跨部门合作的项目管理工具选择
IP代理是什么？有什么好处？
Matlab对多个输入信号进行数值排序提取特定值
引用——C++
电脑上网课录屏怎么录？电脑上网课录屏工具什么好？
ESP8266-Arduino编程实例-BMP180气压温度传感器驱动

原文地址：https://blog.csdn.net/qq_37805832/article/details/126335490