Question

canvas中怎么绘制一个扇形?四分之一圆.

我只能画一个半圆,四分之一圆不行,请高手指点.

Answer 1

<canvas id="canvas" width="150" height="150"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){
var centerPoint = {x:75,y:75};
start_angle = start_angle || 0;
if (canvas_tag.getContext){
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x,centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
}else{
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画一个起始角度为45度，结束角度为90度，绘图方向顺时针的填充扇形
DrawSector(canvas,Math.PI/4,Math.PI/2,50,true,false);
//画一个起始角度为-90度，结束角度为-135度，绘图方向逆时针的未填充扇形
DrawSector(canvas,-Math.PI/2,-Math.PI*3/4,50,false,true);
</script>

Answer 2

在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;
};

Answer 3

ctx.moveTo(x,y)
ctx.arc(x,y,r,s,e,clockAnti)
就是先移动到圆心，然后画弧线