文章目录
- 不使用 rotate
- 使用rotate
不使用 rotate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #ccc;
border-radius: 50%;
}
</style>
</head>
<body>
<canvas width="300" height="300" id="canvas"></canvas>
<div></div>
<script>
const randomColor = () =>
"#" + Math.round(Math.random() * 0xffffff).toString(16);
const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");
const { PI } = Math;
const canvasWidth = 300;//转盘长款宽一致
const halfCanvasWidth = canvasWidth / 2;//宽度的一半 用于圆心，半径等
draw(100);
function draw(length) {
ctx.clearRect(0, 0, canvasWidth, canvasWidth);
const start = -PI / 2;//绘画的起始点正上方
const radian = 2 * PI / length;//一个扇形跨越的角度 如 一个选项占360度 两个一个占180度 三个一个120度
const coordinate = [];//记录右侧选项数值 左侧直接获取相反的值
const drawSector = (index) => {
ctx.beginPath();
ctx.moveTo(halfCanvasWidth, halfCanvasWidth);
ctx.fillStyle = randomColor();// 随机颜色
const up = start + radian * index;// 扇形上边点起点
ctx.arc(halfCanvasWidth, halfCanvasWidth, halfCanvasWidth, up, up + radian);
ctx.fill();
// TODO 文字
ctx.closePath();
}
for (let i = 0; i < length; i++) {
drawSector(i);
}
//! 后画否则会被前面的覆盖
// 中心实心圆形
ctx.beginPath()
ctx.fillStyle = "#f55";
ctx.arc(150, 150, 12, 0, 2 * PI);
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>使用rotate
后来才发现这个方法 可以旋转cnavas绘制的元素
这样画圆的话就不需要计算从多少度到多少度了，只需要计算一个扇形的夹角度数就可以了
更方便的是每个扇形内的文字也可以通过这个方法绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #faa;
}
</style>
</head>
<body>
<canvas width="320" height="320" id='canvas'></canvas>
<script>
const randomColor = () =>
"#" + Math.round(Math.random() * 0xffffff).toString(16);
const canvas = document.getElementsByTagName("canvas")[0];
const ctx = canvas.getContext("2d");
const { PI } = Math;
const canvasWidth = 320;//转盘长款宽一致
const halfCanvasWidth = canvasWidth / 2;//宽度的一半 用于圆心，半径等
// 将 (0,0) 置于圆心
ctx.translate(halfCanvasWidth, halfCanvasWidth);
ctx.moveTo(0, 0);
draw(8);
function draw(length) {
const start = -PI / 2;//绘画的起始点正上方
const radian = 2 * PI / length;//一个扇形跨越的角度 如 一个选项占360度 两个一个占180度 三个一个120度
const drawSector = (index) => {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.fillStyle = randomColor();// 随机颜色
ctx.arc(0, 0, halfCanvasWidth, -radian / 2, radian / 2);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.fillStyle = "#000";
ctx.font = "14px 微软雅黑";
ctx.fillText("Hello", 50, 10);
ctx.closePath();
ctx.rotate(radian);
}
for (let i = 0; i < length; i++) {
drawSector(i);
}
//! 后画否则会被前面的覆盖
// 中心实心圆形
ctx.beginPath()
ctx.fillStyle = "#f55";
ctx.arc(0, 0, 12, 0, 2 * PI);
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>
