[HTML5]如何在 Canvas 中绘制扇形

蓝飞 蓝飞 | 时间:2014-12-02, Tue | 28,232 views
前端开发 

HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形:

// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

但如何绘制一个扇形呢?是不是简单地修改结束角度 2 * Math.PI 就可以了呢?<!--more-->

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI);
ctx.fill();

然而,我们会看到一个不符合我们预期的图形:

如何在 Canvas 中绘制扇形

因为在 arc 方法是用来创建一条弧线的,而如果直接将弧线的起点和终点闭合,再进行填充,自然绘制出的是上面的图形了。

知道了原因,要解决就很简单了,只要让这条弧线与圆心进行闭合,就刚好形成了一个扇形:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,方便绘制
ctx.translate(100, 100);
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();

如何在 Canvas 中绘制扇形

这里的重点在于 moveToclosePath,将路径的起点设置在圆心,而最后闭合路径,正好就成为了一个扇形。

代码也可以抽取为通用的方法,如下:

CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sAngle, eAngle, counterclockwise) {
    this.beginPath();
    this.translate(x, y);
    this.moveTo(0, 0);
    this.arc(0, 0, radius, sAngle, eAngle, counterclockwise);
    this.closePath();
    return this;
};
如需转载请注明出处:蓝飞技术部落格

10 条评论 »

  1. WOW~终于更新了

  2. 秦章建 秦章建

    QQ联系不上呀 不用QQ了?

  3. 白娟 白娟

    如果是类似于饼状图,同时出现好几个扇形,该怎么画

  4. [...]参考文章:蓝飞技术部落格[...]

  5. [...]http://www.clanfei.com/2014/12/1745.html[...]

  6. [...]參考資料:http://www.clanfei.com/2014/12/1745.html (扇形如何繪製)[...]

  7. [...]参考资料:http://www.clanfei.com/2014/12/1745.html (扇形如何绘制)[...]

  8. [...]}); 算法网首页精品教程数据结构时间复杂度空间复杂度树二叉查找树满二叉树完全二叉树平衡二叉树红黑树B树图队列散列表链表算法基础算法排序算法贪心算法递归算法动态规划分治算法回溯法分支限界法拓扑排序字符串相关算法数组相关算法链表相关算法树相关算法二叉树相关算法LeetCodeOnline Judge剑指offer架构设计设计模式创建型单例模式工厂模式原型模式建造者模式结构型组合模式外观模式装饰模式[...]

  9. [...]}); 算法网首页精品教程数据结构时间复杂度空间复杂度树二叉查找树满二叉树完全二叉树平衡二叉树红黑树B树图队列散列表链表算法基础算法排序算法贪心算法递归算法动态规划分治算法回溯法分支限界法拓扑排序字符串相关算法数组相关算法链表相关算法树相关算法二叉树相关算法LeetCodeOnline Judge剑指offer架构设计设计模式创建型单例模式工厂模式原型模式建造者模式结构型组合模式外观模式装饰模式[...]