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();}

總結

以上是生活随笔為你收集整理的canvas中手动绘制椭圆的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。