canvas绘制圆形时,绘制步骤有哪些,canvas绘制椭圆

　　在html5中，CanvasRenderingContext2D对象还提供了绘制圆或弧的特殊方法。请参考以下属性和方法：

　　代码将内容复制到剪贴板ARC (x，y，radius，start rad，end rad，逆时针)上，在画布上以坐标点(x，y)的中心和半径在一个圆上绘制一个圆弧。这个弧的起始弧度是startRad，结束弧度是endRad。这里的弧度是根据X轴的正方向(三点钟方向)和顺时针旋转角度计算的。逆时针指示是逆时针还是顺时针开始绘制。如果为真，表示逆时针方向；如果为假，则表示顺时针方向。逆时针参数可选，默认值为false，即顺时针方向。

　　弧度的计算方法用圆弧()法

　　代码将内容复制到剪贴板arcTo(x1，y1，x2，y2，radius)。该方法将使用当前端点1(x1，y1)和端点2(x2，y2)形成的角度，然后在与该角度两侧相切且半径为的圆上画一条弧。一般画弧的起始位置是当前端点，终止位置是端点2，画弧的方向是连接这两个端点的最短弧的方向。此外，如果当前端点不在指定的圆上，此方法还将从当前端点到圆弧起点绘制一条直线。

　　由于有大量的篇幅来详细描述arcTo()方法，请移至此处查看arcTo()的详细用法。

　　了解了上面canvas画圆弧的API之后，我们再来看看如何用arc()画圆弧。我们已经知道，arc()接收的第4个和第5个参数分别代表弧的起始弧度和结束弧度。相信读者在学校的数学或者几何课程中都学过弧度，弧度是角度单位的一种。弧长等于半径的弧，其圆心角为1弧度。我们也知道半径为r的圆的周长为2 r，有了这些几何知识，我们就可以用arc()方法画圆弧了。

　　使用canvas绘制弧线

　　现在，我们画一个半径为50px的圆的1/4圆弧。

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas绘制圆弧初学者示例/title /head body！-添加带有红色边框的画布标签，以便于在页面上查看-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solidred；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//开始新的绘制路径CTX . begin path()；//将弧线的颜色设置为蓝色ctx.strokeStyle= blueVarcircle={ x:100，//圆心x轴坐标值为y:100，//圆心y轴坐标值为r:50//圆心半径}；//以坐标点(100，100)为圆心，半径为50px，沿圆的顺时针方向画圆弧ctx.arc (circle.x，circle.y，circle.r，0，math.pi/2, false)；//按照指定路径绘制圆弧CTX . stroke()；} /script /body /html对应的显示效果如下：

　　使用canvas沿着顺时针方向绘制弧线如上图，我们将绘制的圆弧所在的圆心坐标设置为(100，100)，半径为50px。由于半径为R的圆的周长为2r，也就是说，一个完整圆的弧度为2(换算成常规角度就是360)，所以我们想画一个圆的四分之一圆弧，只要弧度为/2(即90)。在上面的代码中，我们使用了常量Math。在JavaScript中代表的PI。

　　此外，在上面的代码中，我们还将圆弧绘制的方向设置为顺时针(false)。由于起始弧为0，终止弧为/2，所以会从X轴的正方向顺时针画弧，从而得到上图。如果我们把上面代码中画圆弧的方向改为逆时针，会有什么影响？

　　用画布按逆时针方向画一个圆弧。

　　使用canvas绘制圆形

　　当我们学会了画圆弧，以此类推，我们想画圆是很自然的。我们只需要把上面代码的结束弧改成2就可以了。

　　代码将内容复制到剪贴板script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//开始新的绘制路径CTX . begin path()；//将弧线的颜色设置为蓝色ctx.strokeStyle= blueVarcircle={ x:100，//圆心x轴坐标值为y:100，//圆心y轴坐标值为r:50//圆心半径}；//以画布中的坐标点(100，100)为中心，画一个半径为50px的圆CTX.arc (circle.x，circle.y，circle.r，0，math.pi * 2，true)；//按照指定路径绘制圆弧CTX . stroke()；} /script注意：arc()方法中的起始弧度参数startRad和结束弧度参数endRad都是以弧度为单位。即使你填入一个数字，比如360，仍然会被视为360弧度。将上述代码的结束弧度设置为360会有什么后果？这取决于拉伸方向(即逆时针参数的值)。如果顺时针画(假)，会画出一个完整的圆；如果逆时针画，大于2的弧会转换成等于但不大于2的弧。例如，如果上面代码中的结束弧度设置为3(数学。PI * 3)，如果逆时针为假，则显示为一个完整的圆。如果为真，其显示效果与设置为时相同。

　　弧度设为3时，结束顺时针(假)旋转的绘制效果。

　　弧度设为3时，结束逆时针(正)旋转的绘图效果。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读