专栏首页十月梦想canvas扇形图、饼状图绘制

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:空心圆实现原理:在原图上进行相同的圆心进行绘制一个比原来的圆半径小的圆,填充色为背景色,造成假象被挖空!

更多有趣的画板效果,一起动手实现吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • canvas文本操作

    contetx.fillText('需要写入画板的文字',left,top,maxwidth);指定了写入画板的文字,文字所处画板的位置left,top,最后一...

    十月梦想
  • canvas简单线条的绘制

    1.绘制线条之前首先进行声明线条开始绘制代码context.beginPath;说明:context是画板中获得的绘画环境上述的是cv

    十月梦想
  • canvas封闭状态及状态恢复

    使用context.save()会保存当前的线条颜色,宽度属性,进行多次保存,使用context.restore()恢复离之最近之前的状态,

    十月梦想
  • 从源码学习设计模式之模板方法

    模板设计方法存在目的在于某些算法逻辑存在一些相同处,而具体细节却不同。这样使用模板方法,可以抽取共用逻辑到父类,在子类实现具体算法细节,这样减少了重复代码。 模...

    andyxh
  • Android Studio相见恨晚的操作锦集

    作为一个Android开发者,最常使用的就是Android Studio了,我在这里声明Android Studio比Eclipse好用100倍,不服来辩。本文...

    非著名程序员
  • CentOS7下升级OpenSSL和OpenSSH

    本文参考 http://www.dengb.com/Linuxjc/1355285.html

    yuanfan2012
  • 程序员你为什么这么累?

    大家一提到程序员,首先想到的是以下标签:苦逼,加班,熬夜通宵。但是,但凡工作了的同学都知道,其实大部分程序员做的事情都很简单,代码CRUD可以说毫无技术含量,就...

    哲洛不闹
  • Python IDE安装

    今天我就来讲一下Python IDE的安装,Python IDE有很多,Python官网自带的IDE,pycharm,eclipse,sublime,anaco...

    不可言诉的深渊
  • 打卡群刷题总结0730——格雷编码

    1、每次新增的数num2[j] = 2^(i-1) + num[-j-1],其中,i为二进制数字的位数,j为数组的第几个数。

    木又AI帮
  • 好雨云使用OKRs做绩效管理

    Rainbond开源

扫码关注云+社区

领取腾讯云代金券