html5canvas怎么改变扇形起始角的位置

在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 就可以了呢？

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI)

ctx.fill()

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

因为在 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()

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

代码也可以抽取为通用的方法，如下：

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

}

接下来，我们来看一下除了arc方法以外，其他使用路径绘制 图形 时会使用的方法。首先从绘制直线开始。

绘制直线一般会用到2个方法，分别是moveTo方法，lineTo方法

1. moveTo方法

moveTo方法的作用是将光标移动到指定的位置，绘制直线的时候以这个坐标为起点。使用如下：moveTo（x,y）

该方法有2个参数，x指指定左标的横坐标，y指指定坐标的纵坐标。

2. lineTo方法

lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下：

lineTo（x,y）

该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后，光标会自动移到lineTo指定的直线的终点。

因此，在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，使用lineTo方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。

运行结果：

---