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,也就是逆时针绘制。


鲜花

握手

雷人

路过

鸡蛋
返回顶部