<!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>