[Canvas系列]Canvas绘制圆弧形状_04
2016-12-14 00:06
351 查看
canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。
arc的语法如下:
他的参数我解释一下,即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆,该怎么搞?大家注意到参数中有个开始角度与结束角度,如果我们开始角度是0,结束角度是360,不就是个正圆了?
正解!但要注意的是,这里的角度是用“弧度”来表示的(Flash也是如此),一个完整的圆即360度,就是2PI弧度。
所以我们这么写:
和lineTo一样,arc也是画的路径,所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了红色的strokeStyle与半透明红色的fillStyle)。
现在我们来画一个1/4圆,角度嘛,就是90度。前面说了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
由图我们可以确定arc的0度就是数学上常用的0度,但是角度默认是顺时针张开的,与数学模型相反(跟坐标有关,因为canvas坐标也与数学坐标相反)。
不过前面不是有个参数是确定是否逆时针吗?我们把他设为true如何?
你会看到,角度变成了逆时针展开,导致弧线变成了360-90=270度。
但是!大家要注意一点,就是起点与终点的计算方式,始终是以0度为起点,并顺时针延伸的,不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆,而且更方便计算。
不过,灵活的使用逆时针,有时候很有用。
上面的例子,我们的起点角度都是0,现在我们试试其他的起点角度吧,比如90度。
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。
arc的语法如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的参数我解释一下,即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆,该怎么搞?大家注意到参数中有个开始角度与结束角度,如果我们开始角度是0,结束角度是360,不就是个正圆了?
正解!但要注意的是,这里的角度是用“弧度”来表示的(Flash也是如此),一个完整的圆即360度,就是2PI弧度。
所以我们这么写:
1 2 3 | ctx.arc(400,400,20,0,Math.PI*2); ctx.fill(); ctx.stroke(); |
现在我们来画一个1/4圆,角度嘛,就是90度。前面说了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
1 | ctx.arc(400,400,20,0,Math.PI*2/4); |
由图我们可以确定arc的0度就是数学上常用的0度,但是角度默认是顺时针张开的,与数学模型相反(跟坐标有关,因为canvas坐标也与数学坐标相反)。
不过前面不是有个参数是确定是否逆时针吗?我们把他设为true如何?
1 | ctx.arc(400,400,20,0,Math.PI*2/4,true); |
你会看到,角度变成了逆时针展开,导致弧线变成了360-90=270度。
但是!大家要注意一点,就是起点与终点的计算方式,始终是以0度为起点,并顺时针延伸的,不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆,而且更方便计算。
不过,灵活的使用逆时针,有时候很有用。
上面的例子,我们的起点角度都是0,现在我们试试其他的起点角度吧,比如90度。
1 | ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI); |
[Canvas系列]Canvas画布系列教程
相关文章推荐
- Html5 Canvas 系列_绘图三(H5 绘制圆弧)
- h5中使用canvas绘制线段、多边形、圆、圆弧
- [Canvas系列]Canvas简单线条绘制_02
- opera下canvas绘制圆弧arc的一个bug
- HTML5在canvas中绘制复杂形状附效果截图
- Android自定义组件系列【9】——Canvas绘制折线图
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
- 自定义View学习笔记04—Canvas的绘制图形
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- Android OpenGL ES 入门系列(四) --- 绘制形状
- Graphics->Arcs Canvas提供了drawArc来绘制圆弧。
- 安卓自己定义View进阶-Canvas之绘制基本形状
- [置顶] arcgis api for js入门开发系列十九 用HTML5 canvas绘制地图
- canvas-2绘制圆弧
- [置顶] arcgis api for js入门开发系列二十 用HTML5 canvas绘制地图 瓦片以及如何计算
- Android自己定义组件系列【9】——Canvas绘制折线图
- [置顶] arcgis api for js入门开发系列二十一 用HTML5 canvas绘制地图 瓦片加载平移缩放
- [Canvas系列]Canvas绘制曲线之arcto_05
- 新手学自定义View系列(一)之canvas绘制API