使用canvas绘制扇形图

最新推荐文章于 2023-07-08 11:58:15 发布

LCYong_

最新推荐文章于 2023-07-08 11:58:15 发布

阅读量8.1k

点赞数 2

分类专栏： JavaScript 文章标签： canvas JavaScript 扇形图

本文链接：https://blog.csdn.net/LCYong_/article/details/70226259

版权

本文介绍如何利用JavaScript配合HTML5的canvas元素，详细步骤解析如何绘制出美观的扇形图，适用于数据可视化场景。

摘要由CSDN通过智能技术生成

<canvas> 标签定义图形，比如图表和其他图像, 必须使用脚本来绘制图形。

效果如图:

html代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="canvasPie.js"></script>
<body>

    <canvas id="canvas_circle" width="300"height="600" ></canvas>
</body>
</html>

JavaScript代码:

function drawCircle(canvasId,data_arr,color_arr,text_arr)
{
    var c=document.getElementById(canvasId);
    var ctx=c.getContext("2d");//图画绘制对象
    var radius=c.width*0.5-20;//半径
    var ox=radius+20,oy=radius+20;//圆心
    var pwi