<DOCTYPE HTML>
<html>
<head>
<title>弧线</title>
<script type="text/javascript">
function draw(){
var c = document.getElementById("myCanvas");
if (c.getContext)
{
var cxt = c.getContext("2d");
for (i=0; i<4; i++)
{
for (j=0; j<3; j++)
{
cxt.beginPath();
var x = 25+j*50;
var y = 25+i*50;
var radius = 20;
var startAngle = 0;
var endAngle = Math.PI+(Math.PI*j)/2;
var clockwise = i%2==0 ? false : true;
cxt.arc(x,y,radius,startAngle,endAngle,clockwise);
if (i>1)
{
cxt.fill();
} else {
cxt.stroke();
}
}
}
} else {
alert("您的浏览器不支持");
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="200" style="border:#06f solid 2px";></canvas>
</body>
</html>
显示图如下：
【弧线 Arcs用 arc方法来绘制弧线或圆。arc(x, y, radius, startAngle, endAngle, anticlockwise) 。方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。此示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像我这里画 90，180 和 270 度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。这里使用两个 for 循环来画多行多列的弧形。每一个弧形都用 beginPath 方法创建一个新路径。然后为了方便阅读和理解，我把所有参数都写成变量形式。显而易见，x 和 y 作为圆心坐标。 radius和startAngle 都是固定，endAngle 从 180 度半圆开始，以 90 度方式递增至圆。anticlockwise 则取决于奇偶行数。最后，通过 if 语句判断使前两行表现为勾边，而后两行为填充效果。】