canvas中手動繪制橢圓的方法

講解：canvas手動繪制橢圓是通過兩點(diǎn)進(jìn)行繪制，相當(dāng)于繪制一個(gè)矩形，然后它的內(nèi)切橢圓（已知起點(diǎn)和終 點(diǎn)）。假設(shè)起點(diǎn)為（bx，by）終點(diǎn)為（ex，ey）
（1）橢圓半軸（下面會用到此參數(shù)）：

var axisx = Math.abs((ex- bx)/2); //半軸是自然數(shù)，所以加了絕對值 var axisy = Math.abs((ey-by)/2);

（2）橢圓中心點(diǎn)（下面會用到此參數(shù)）：

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)參數(shù)的意思ellipse(橢圓中心點(diǎn)的x值，橢圓中心點(diǎn)的y值，半徑x，半徑y(tǒng)，旋轉(zhuǎn)角度，起始角，結(jié)束角，順時(shí)針還是逆時(shí)針)，其中順時(shí)針還是逆時(shí)針可以不寫。

function drawellipse(bx,by,ex,ey){ var canvas = document.getElementById("canvas");var ctx=canvas.getContext('2d') ctx.beginPath(); //開始繪制 ctx.lineWidth =2; // 可以設(shè)置橢圓線的寬度 ctx.ellipse(centerx,centery,axisx,axisy,0,0,2*Math.PI); ctx_anno.strokeStyle = "#07F407"; //設(shè)置橢圓線的顏色 ctx.stroke();}

2.參數(shù)方程法

function drawellipse(bx,by,ex,ey){ var canvas = document.getElementById("canvas");var ctx=canvas.getContext('2d') var step = (axisx>axisy)?1/axisx:1/axisy; // 每次循環(huán)繪制step，使得每次循環(huán)所繪制的路徑（弧線）接近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)); //數(shù)方程為x = a * cos(i), y = b * sin(i),i表示弧度 } ctx.closePath(); ctx.stroke();}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。