html5 Canvas画图教程(5)—canvas里画曲线之arc方法
发布时间：2013-01-09 14:10:14 作者：佚名 
我要评论
我要评论anvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧,感兴趣的朋友可以了解下哦
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。
canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。
arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。
arc的语法如下：
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的参数我解释一下，即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆，该怎么搞？大家注意到参数中有个开始角度与结束角度，如果我们开始角度是0，结束角度是360，不就是个正圆了？
正解！但要注意的是，这里的角度是用“弧度”来表示的（Flash也是如此），一个完整的圆即360度，就是2PI弧度。
所以我们这么写：
ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一样,arc也是画的路径，所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了红色的strokeStyle与半透明红色的fillStyle)。
现在我们来画一个1/4圆,角度嘛，就是90度。前面说了，360度角即2PI弧度，那么一度角就是2PI/360=PI/180弧度，那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
ctx.arc(400,400,20,0,Math.PI*2/4);
由图我们可以确定arc的0度就是数学上常用的0度，但是角度默认是顺时针张开的，与数学模型相反（跟坐标有关，因为canvas坐标也与数学坐标相反）。
不过前面不是有个参数是确定是否逆时针吗？我们把他设为true如何？
ctx.arc(400,400,20,0,Math.PI*2/4,true);
你会看到，角度变成了逆时针展开，导致弧线变成了360-90=270度。
但是！大家要注意一点，就是起点与终点的计算方式，始终是以0度为起点，并顺时针延伸的，不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆，而且更方便计算。
不过，灵活的使用逆时针，有时候很有用。
上面的例子，我们的起点角度都是0，现在我们试试其他的起点角度吧，比如90度。
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);
如果我们起点是90度而终点也是90度，那结果就是什么都不得画，所以我把终点角度改成了180度，最后得到下图的图形。
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起点90度，终点360+90度
不过这种做法纯属没事找事，正常人是不会用的。
总结：Canvas的arc方法是画正圆弧线的办法，也只能画正弧线，没法画其他奇怪的弧线,比如S形——虽然我最喜欢S形了。
canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。
arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。
arc的语法如下：
复制代码
代码如下:context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的参数我解释一下，即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆，该怎么搞？大家注意到参数中有个开始角度与结束角度，如果我们开始角度是0，结束角度是360，不就是个正圆了？
正解！但要注意的是，这里的角度是用“弧度”来表示的（Flash也是如此），一个完整的圆即360度，就是2PI弧度。
所以我们这么写：
复制代码
代码如下:ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一样,arc也是画的路径，所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了红色的strokeStyle与半透明红色的fillStyle)。
现在我们来画一个1/4圆,角度嘛，就是90度。前面说了，360度角即2PI弧度，那么一度角就是2PI/360=PI/180弧度，那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
复制代码
代码如下:ctx.arc(400,400,20,0,Math.PI*2/4);
由图我们可以确定arc的0度就是数学上常用的0度，但是角度默认是顺时针张开的，与数学模型相反（跟坐标有关，因为canvas坐标也与数学坐标相反）。
不过前面不是有个参数是确定是否逆时针吗？我们把他设为true如何？
复制代码
代码如下:ctx.arc(400,400,20,0,Math.PI*2/4,true);
你会看到，角度变成了逆时针展开，导致弧线变成了360-90=270度。
但是！大家要注意一点，就是起点与终点的计算方式，始终是以0度为起点，并顺时针延伸的，不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆，而且更方便计算。
不过，灵活的使用逆时针，有时候很有用。
上面的例子，我们的起点角度都是0，现在我们试试其他的起点角度吧，比如90度。
复制代码
代码如下:ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);
如果我们起点是90度而终点也是90度，那结果就是什么都不得画，所以我把终点角度改成了180度，最后得到下图的图形。
复制代码
代码如下:ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起点90度，终点360+90度
不过这种做法纯属没事找事，正常人是不会用的。
总结：Canvas的arc方法是画正圆弧线的办法，也只能画正弧线，没法画其他奇怪的弧线,比如S形——虽然我最喜欢S形了。
相关文章
本文主要介绍了html网页播放多个视频的几种方法，包含iframe标签，VLC插件和一些常见的js插件，具有一定的参考价值，感兴趣的可以了解一下2024-03-04
做HTML5的video标签，本身我们有下载功能,由于权限问题，所以本文就来介绍一下HTML5中video标签禁止右键和下载视频的问题解决，具有一定的参考价值，感兴趣的可以了解一下2024-02-28html5 video标签controlslist的具体使用
HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性，本文主要介绍了html5 video标签controlslist的具体使用，具有一定的参考价值，感兴趣2024-02-27
在html5页面中嵌入视频的时候页面中只显示声音却不显示图像，本文主要介绍了HTML5 video播放有声音无图像的解决方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-21
在做html5项目的时候有个需求，就是移动端长按不保存图片，本文就来介绍一下Html5移动端禁止长按保存图片的三种实现方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-20- 混合开发中遇到一个问题，有些型号的安卓机和ios机型，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验，今天给大家分享HTML5键盘弹起遮挡输2024-01-03
本文主要介绍了html5登录玻璃界面特效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
学习Canvas的时候，打算描绘一个矩形并测试清除画布方法时，但是发现画布渲染不出来，本文就来介绍一下该问题的解决，具有一定的参考价值，感兴趣的可以了解一下2023-12-05
实际开发中，小程序和H5往往有很多业务场景需要来回跳转，本文就来介绍一下Html5页面跳转小程序的三种方式，感兴趣的可以了解一下2023-12-04
HTML5标签是HTML语言的最新版本引入的一些新的标签，这些标签用于定义网页内容的结构和语义,相比于以前的HTML版本，HTML5标签提供了更加语义化的元素，本文就给大家介绍HTM2023-11-07
最新评论