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

html-css039

html5canvas怎么改变扇形起始角的位置,第1张

在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

}

我的思路是这样的:

用圆角属性做出扇形,再用一个矩形去遮挡

宽高相等画出正方形

加border-radius属性做出1/4圆或者1/2圆

矩形旋转

例如transform: rotate(45deg) 顺时针旋转45度

以上都在一个position:relative的父元素中,要旋转的矩形position:absolute

用js控制矩形旋转的角度,应该就可以了

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>效果实现</title>

<style>

*{margin: 0padding: 0}

div{width: 0pxheight: 0pxborder-radius: 50pxborder:50px solid transparentborder-top-color:red}

</style>

</head>

<body>

<div></div>

</body>

</html>