html5Canvas画图教程—使用.docVIP

在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。 我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，高度——或者还有旋转角度，不过这个可以暂时不要，旋转是比较容易的。 1,使用lineTo画椭圆 你没有看错，lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆！？但他确实存在，不过写法实在是有些不可思议： 复制代码 代码如下: function DrawEllipse(Canvas,O,OA,OB){ //画椭圆，例子：var B=new Array(150,150); DrawEllipse(hb,B,50,30); with (Canvas){ var x=O[0]+OA; var y=O[1]; moveTo(x,y); for (var i=0;i=360;i++){ var ii=i*Math.PI/180; var x=O[0]+OA*Math.cos(ii); var y=O[1]-OB*Math.sin(ii); lineTo(x,y); } } } 这个方法的原理是，一个圆有360度，那么就用lineTo循环360次，画出每一度的线段，最终连成一个椭圆。其中需要用到三角函数正弦余弦