canvas绘制三等分饼型图
2024-08-30 01:12:26
<!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>
最新文章
- 编译protobuf的jar文件
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- 利用Servlet导出Excel
- [转载]将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,解决办法
- Centos 关闭后台进程 .sh 等
- select的option异常的总结
- c#与java webservice调用问题
- 限制SSH访问源,禁止4A之外的地址跳转访问
- Java中 int和Integer的区别+包装类
- Serializable在C#中的作用——.net中的对象序列化
- 一个关于css3背景透明的例子
- 初识Redis系列之二:安装及简单使用
- 论文笔记:AdaScale: Towards real-time video object detection using adaptive scalingAdaScale
- kmeans聚类理论篇
- js之返回网页顶部
- alert.log中的minact-scn: useg scan erroring out with error e:376警告
- kubernetes 实战6_命令_Share Process Namespace between Containers in a Pod&;Translate a Docker Compose File to Kubernetes Resources
- 20145209刘一阳《网络对抗》Exp8 Web基础
- django的项目创建简明流程
- 在python列表中删除所有空元素