原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
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>
代码运行效果截图如下:
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>
代码运行效果截图如下:
代码分析如下:
(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>
代码运行效果截图如下:
弧度值不但可以正数,也可以是负数,和数学中原理大致相同,代码分析如下:
(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>
代码运行效果截图如下:
将方法的最后一个参数设置为true,也就是逆时针绘制。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落