canvas API 如何改变画圆起点，为什么老是从3点钟方向开始画，我要画空心圆，从6点钟方向开始画

<canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3"></canvas>

<script>

var cv=document.getElementById("canvas")

var ctx = cv.getContext("2d")

ctx.save()

ctx.translate(cv.width/2,cv.height/2)

ctx.rotate(90*Math.PI/180)

ctx.beginPath()

ctx.arc(0,0,100,0,360*Math.PI/180,true)

ctx.strokeStyle="red"

ctx.stroke()

ctx.restore()

</script>

在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

}

您可以使用SVG或Canvas来从鼠标落脚点开始绘制矩形。SVG可以使用<rect>元素，并使用x和y属性来指定矩形的起点。Canvas可以使用fillRect()方法，并使用x和y参数来指定矩形的起点。此外，您还可以使用CSS来绘制矩形，并使用position属性来指定矩形的起点。

---