canvas扇形图、饼状图绘制
上一篇说过使用arc属性绘制一个完整的圆,这是绘制扇形是不是可以刷一下小聪明吧弧度修改一下,你会发现绘制的扇形想西瓜皮一样,只有初始弧度到结束弧度的一个简单连接,就行下面这个样子,这肯定不是我们想要扇形的样子哇
扇形的弧度没有到圆心的连线啊,这不是我们理想中的扇形,(如下图)
这样老实巴交的扇形如何实现呢,很简单,在绘制扇形前进行路径引入
context.beginPath();
contetx.moveTo(top,left);//开启位置为圆心的位置这样就可以实现上述的扇形,完整代码如下
<canvas id="canvas" width="900" height="500"></canvas>
<script type="text/javascript">
var c=document.getElementById('canvas');
var cv=c.getContext('2d');
//扇形绘制需要给一个起始点之前的线条绘制相结合就可以解决,起始位置要和扇形圆心一致
cv.beginPath();//开启路径
cv.moveTo(300,300);
cv.arc(300,300,150,0*Math.PI/180,60*Math.PI/180);
cv.fillStyle='yellow';//填充样式
cv.fill();//填充(闭合)
</script>单独的扇形图绘制出来了,但是类似于饼状图怎么实现呢
简单的实现了,我们可以进行复制核心代码进行,不同扇形图进行拼接一个圆,就变成一个饼状图.
扇形核心代码:
cv.beginPath();//开启路径
cv.moveTo(300,300);
cv.arc(300,300,150,0*Math.PI/180,60*Math.PI/180);
cv.fillStyle='yellow';//填充样式
cv.fill();//填充(闭合)完整饼状图实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扇形组合图像</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
canvas{
background:#EE00EE;
}
</style>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script type="text/javascript">
var c=document.getElementById('canvas');
var cv=c.getContext('2d');
//创建一个圆
//扇形绘制需要给一个起始点之前的线条绘制相结合就可以解决,起始位置要和扇形圆心一致
//第一个扇形开始
cv.beginPath();//开启路径
cv.moveTo(300,300);
cv.arc(300,300,150,0*Math.PI/180,60*Math.PI/180);
cv.fillStyle='yellow';//填充样式
cv.fill();//填充(闭合)
//第二个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,60*Math.PI/180,170*Math.PI/180)
cv.fillStyle='white';
cv.fill();
//第三个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,170*Math.PI/180,242*Math.PI/180);
cv.fillStyle='orange';
cv.fill();
//第四个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,242*Math.PI/180,302*Math.PI/180);
cv.fillStyle='purple';
cv.fill();
//第五个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,302*Math.PI/180,360*Math.PI/180);
cv.fillStyle='#26ffff';
cv.fill();
</script>
</body>
</html>当然还有稍微改进可以将饼状图变为空心的饼状图,饼状图去掉圆心
图例:
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>空心圆</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
canvas{
background:#EE00EE;
}
</style>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script type="text/javascript">
var c=document.getElementById('canvas');
var cv=c.getContext('2d');
// context.arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线
// （用于创建圆形或部分圆）
// 参数说明：
// x 圆的中心的 x 坐标。
// y 圆的中心的 y 坐标。
// r 圆的半径。
// sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
// eAngle 结束角，以弧度计。
// counterclockwise 可选。False = 顺时针，true = 逆时针。
//创建一个圆
//扇形绘制需要给一个起始点之前的线条绘制相结合就可以解决,起始位置要和扇形圆心一致
//第一个扇形开始
cv.beginPath();//开启路径
cv.moveTo(300,300);
cv.arc(300,300,150,0*Math.PI/180,60*Math.PI/180);
cv.fillStyle='yellow';//填充样式
cv.fill();//填充(闭合)
//第二个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,60*Math.PI/180,170*Math.PI/180)
cv.fillStyle='white';
cv.fill();
//第三个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,170*Math.PI/180,242*Math.PI/180);
cv.fillStyle='orange';
cv.fill();
//第四个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,242*Math.PI/180,302*Math.PI/180);
cv.fillStyle='purple';
cv.fill();
//第五个扇形
cv.beginPath();
cv.moveTo(300,300);
cv.arc(300,300,150,302*Math.PI/180,360*Math.PI/180);
cv.fillStyle='#26ffff';
cv.fill();
cv.beginPath();
cv.arc(300,300,50,0*Math.PI/180,360*Math.PI/180);
cv.fillStyle='#EE00EE';
cv.fill();
</script>
</body>
</html>PS:空心圆实现原理:在原图上进行相同的圆心进行绘制一个比原来的圆半径小的圆,填充色为背景色,造成假象被挖空!
更多有趣的画板效果,一起动手实现吧!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-1-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
