canvas 画圆的比例

最新推荐文章于 2023-12-04 06:15:00 发布

羽湘楚

最新推荐文章于 2023-12-04 06:15:00 发布

阅读量798

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 canvas javascript math

本文链接：https://blog.youkuaiyun.com/weixin_38337068/article/details/75675960

本文介绍了如何使用HTML5的canvas元素结合JavaScript和Math来创建一个动态显示比例的圆形图表。示例代码展示了如何绘制两个同心圆，一个代表0到360度，另一个根据比例变化其起始和结束角度，形成一种视觉效果。

效果图对象，原理是两个圆，一个由0到360度，另一个的开始度数和结束度数由比例变化

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#o{
margin: 50px auto;
background: gainsboro;
}

</style>
</head>
<body>
<canvas id="o"></canvas>
<script type="text/javascript">
var ma=document.getElementById('o');
ma.width="400";
ma.height='400';
var mm=ma.getContext('2d');
//大圆
mm.beginPath();//开始执行
mm.lineWidth='10';//边框
mm.strokeStyle='wheat';//边框颜色
mm.arc(200,200,100,0,360*Math.PI/180,false);//画圆
mm.stroke();//连线
//比例圆
mm.beginPath();//开开始执行
mm.lineWidth='10';//边框
mm.strokeStyle='red';//边框颜色
mm.arc(200,200,100,-30*Math.PI/180,200*Math.PI/180,false);//画圆
mm.stroke();//连线
</script>
</html>