宽高相等画出正方形
加border-radius属性做出1/4圆或者1/2圆
矩形旋转
例如transform: rotate(45deg) 顺时针旋转45度
以上都在一个position:relative的父元素中，要旋转的矩形position:absolute
用js控制矩形旋转的角度，应该就可以了
在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
}
<!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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）