[转]html5 Canvas画图教程(5)—canvas里画曲线之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度,最后得到下图的图形。

问题:如果我们从非0度起点来画一个完整的圆,行不行?当然也可以,只要你把弧线的终点设置为360度+起点角度,如:

复制代码

代码如下:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起点90度,终点360+90度

不过这种做法纯属没事找事,正常人是不会用的。 
总结:Canvas的arc方法是画正圆弧线的办法,也只能画正弧线,没法画其他奇怪的弧线,比如S形——虽然我最喜欢S形了。

时间: 2024-08-09 03:16:33

[转]html5 Canvas画图教程(5)—canvas里画曲线之arc方法的相关文章

[转]html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

arc与arcTo,从名字都能看出来相似.arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线.但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点,而且这两个点中并没有表示圆心的点,仅仅最后的参数是圆的半径,表示arcTo和圆有那么点关系. 网上关于arcTo的文章很少,好不容易找到一篇还是外国的:而且canvas画图木有直观工具,只能靠猜,arcTo害我猜了半天.. 为了直观的描述,我采取了一种辅助办法:arc

[转]html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法

前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了. bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解. bezierCurveTo的语法如下: ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下,其中的(x1,

[转]html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

继续讲canvas中画曲线的方法,今天讲quadraticCurveTo. 说实话这个方法有点吓人,单从函数名称上都可以初体验.话说,我觉得有必要把这个函数名缩短. quadratic的意思是二次,即数学中二次元方程那个二次.而ctx.quadraticCurveTo的参数如下: 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定. 我之所以把控制点的坐标带上

[转]html5 Canvas画图教程(9)—canvas中画出矩形和圆形

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形.当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟. canvas画矩形 1,fillRect与strokeRect fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式:同理strokeRect就是直接描边一个矩形 他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高).这里的起点,注意,是指矩形的左上角那个点. 我们通常用他们来做简单的事,他们也只能做简单的事.为什

[转]html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:  这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子: 每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止. 如果我们画1像素线条的时候,遵循像

[转]html5 Canvas画图教程(1)—画图的基本常识

今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的.所以,如果你想学习Canvas画图,你必须要有Javascript基础. 另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易. Canvas,意为画布也.而Html5中的Canvas也真的跟现实生活中的画布非常相似.所以,把他看成一块实实

[转]html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形

在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟. 我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度——或者还有旋转角度,不过这个可以暂时不要,旋转是比较容易的. 1,使用lineTo画椭圆 你没有看错,lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆!?但他确实存在,不过写法实在是有些不可思议: 代码如下: function DrawElli

[转]html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 代码如下: var cvs = document.getElementById('cvs'); //画布 var ctx = cvs.getContext('2d'); // 画笔 我们画画的时候,落笔点是不固定的,随时都会变.canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo.moveTo的作用相当于把笔尖提离画布,然后移动到指定的点(即坐标).

[转]html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成.而本文讲的圆角矩形则只有通过其他方法模拟出来. 一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致——因为这样比较好画.我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成. 提到钩子,如果你看过我介绍arcTo的文章,那么可能你一下就明白了这种图形就可以用arcTo画出来. 我讲arcTo的时候提过,arcTo有个特性就是,他的第2条切线延长也并不会对他画出的线条造成影响(在上文的最后部分