canvas中手动绘制椭圆的方法

canvas中手动绘制椭圆的方法

讲解：canvas手动绘制椭圆是通过两点进行绘制，相当于绘制一个矩形，然后它的内切椭圆（已知起点和终 点）。假设起点为（bx，by）终点为（ex，ey）
（1）椭圆半轴（下面会用到此参数）：

var axisx = Math.abs((ex- bx)/2);  //半轴是自然数，所以加了绝对值    				
var axisy = Math.abs((ey-by)/2);

（2）椭圆中心点（下面会用到此参数）：

var centerx = axisx+Math.min(bx,ex);     				  
var centery = axisy+Math.min(by,ey);

具体方法
1.canvas自带的绘制椭圆方法：ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)参数的意思ellipse(椭圆中心点的x值，椭圆中心点的y值，半径x，半径y，旋转角度，起始角，结束角，顺时针还是逆时针)，其中顺时针还是逆时针可以不写。

function drawellipse(bx,by,ex,ey){  
         var canvas = document.getElementById("canvas");
         var  ctx=canvas.getContext('2d')           
         ctx.beginPath();  //开始绘制            
         ctx.lineWidth =2; // 可以设置椭圆线的宽度            
         ctx.ellipse(centerx,centery,axisx,axisy,0,0,2*Math.PI);            
         ctx_anno.strokeStyle = "#07F407";  //设置椭圆线的颜色            
         ctx.stroke();
          }

2.参数方程法

 function drawellipse(bx,by,ex,ey){     
 	 var canvas = document.getElementById("canvas");
           var  ctx=canvas.getContext('2d')   		
           var step = (axisx>axisy)?1/axisx:1/axisy; // 每次循环绘制step，使得每次循环所绘制的路径（弧线）接近1像素    		
           ctx.beginPath();    		
           ctx.moveTo(centerx+axisx,centery);    		
           for(var i=0;i<2*Math.PI;i+=step){        		
           	ctx.lineTo(centerx+axisx*Math.cos(i),centery+axisy*Math.sin(i)); //数方程为x = a * cos(i), y = b * sin(i),i表示弧度   		 
           	} 
           ctx.closePath(); 
           ctx.stroke();
           }