蚂蚁部落缺失教程将会被持续修补 ( 2019-09-14 )

文章导航

canvas arc()

2018-11-29 16:30| 作者: admin| 查看: 985| 评论: 0|来自: 蚂蚁部落

原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。

arc翻译成汉语具有"圆弧"的意思。

恰如其名，arc方法可以用来绘制圆弧，最大的圆弧就是一个整圆。

语法结构：

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

参数解析:

（1）.x：必需，规定圆弧所在圆的圆心x轴坐标。

（2）.y：必需，规定圆弧所在圆的圆心y轴坐标。

（3）.r：必需，规定圆弧所在圆的半径坐标。

（4）.sAngle：必需，规定圆弧绘制起始角度（弧度）。

（5）.eAngle：必需，规定圆弧绘制的终止角度（弧度）。

（6）.counterclockwise：可选，布尔值，规定圆弧绘制的方向，true表示逆时针，false顺时针，默认值。

浏览器兼容：

（1）.IE9+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。。

（4）.火狐浏览器支持此方法。

（5）.Opera浏览器支持此方法。

（6）.Safari浏览器支持此方法。

代码实例：

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

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163200u4vu4fa4naaaa66k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

arc方法用于绘制圆弧，圆是最大的圆弧，代码分析如下：

（1）.圆心坐标是（100, 100）。

（2）.规定圆的半径为50像素。

（3）.规定绘制的起始弧度为0，结束弧度为2π，于是完成一个整圆的绘制。

arc方法的理解是非常简单的，唯一有难度的地方在于第四和第五个参数。

特别说明：绘制圆弧起始和终止角度用的是弧度。

下面补充一下初中关于圆的数学知识：

（1）.一个圆周的弧度是2π，值等同于代码中的2 * Math.PI。

（2）.一个圆周的角度是360。

那么可以推导出如下结论：

（1）.一度角对应(2 * Math.PI)/360弧度。

（2）.那么任意角度α对应的弧度是α*((2 * Math.PI)/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(){
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let rad = Math.PI / 180;
  ctx.strokeStyle="rgba(255,0,0,0.3)";
  ctx.arc(100, 100, 50, 0 * rad, 360 * rad);
  ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle="rgba(125,125,125,1.0)";
  ctx.arc(100, 100, 50, 0 * rad, 50 * rad);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="200"></canvas>
</body>
</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163239psfktkkjkuqzktjf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

代码分析如下：

（1）.绘制了一个红色的整圆，此圆恰好与灰色圆弧所在的圆重合，为了便于观察效果。

（2）.圆弧默认是按照顺时针方向绘制的，也就是最后一个参数为false（默认）。

同时，可以得出，canvas中，角度以顺时针为正，普通数学中，以逆时针为正，再来看一段代码：

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

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163310eyuqoqkovyk7qycc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

弧度值不但可以正数，也可以是负数，和数学中原理大致相同，代码分析如下：

（1）.canvas中角度以顺时针为，那么很自然逆时针为负，与常规数学模型相反。

（2）.那么绘制-50度角对应的圆弧，也就是从A点到B点这段圆弧角度。

（3）.但是又由于是按照逆时针方向绘制，所以就绘制出一大段灰色圆弧。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let rad = Math.PI / 180;
  ctx.strokeStyle="rgba(255,0,0,0.3)";
  ctx.arc(100, 100, 50, 0 * rad, 360 * rad);
  ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle="rgba(125,125,125,1.0)";
  ctx.arc(100, 100, 50, 0 * rad, -50 * rad,true);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="200"></canvas>
</body>
</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163340d9l98vzhzmz9ml8d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

将方法的最后一个参数设置为true，也就是逆时针绘制。

鲜花

握手

雷人

路过

鸡蛋

收藏分享

上一篇：canvas 绘制圆角矩形下一篇：canvas createRadialGradient()