canvas arc()方法详解

2018-8-9 08:55| 作者: admin| 查看: 577| 评论: 0|来自: 蚂蚁部落

此方法可以绘制圆弧,下面详细介绍一下它的用法。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.arc(x,y,r,sAngle,eAngle,counterclockwise)

参数解析:

(1).x:必需,圆心的x轴坐标。

(2).y:必需,圆心的y轴坐标。

(3).r:必须,圆的半径尺寸。

(4).sAngle:必需,圆弧绘制起始角度(弧度)。

(5).eAngle:必需,圆弧绘制的终止角度(弧度)。

(6).counterclockwise:可选,规定圆弧顺时针绘制还是逆时针绘制,false顺时针(默认),true逆时针。

先补充一点初中数学知识,以便于圆角绘制:

一个圆周的弧度是2π,一个圆周是360度,那么一度角对应2π/360弧度。

于是得出,任意度数角α对应的弧度是α*π/180。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 80, 0, 2 * Math.PI);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的代码绘制了一个完整的圆弧,从0弧度开始绘制,2π弧度结束。

0弧度的开始位置默认坐标是(180,100)。

再来看一个代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var rad = Math.PI / 180;
  ctx.arc(100, 100, 80, 30 * rad, 120 * rad);
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的代码绘制了从30度到120度的圆弧;大家也可以注意到canvas的圆角计算模型和数学中的有所区别,数学中的逆时针是正,但是canvas中顺时针为正。再来看一度代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var rad = Math.PI / 180;
  ctx.arc(100, 100, 80, 30 * rad, 120 * rad,true);
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的代码我们将绘制设置为逆时针。

特别注意:虽然绘制方向变了,但是canvas的圆角计算模型没变,依然是顺时针为正。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部