Canvas畫橢圓的方法

來源：懂視網責編：小采時間：2020-11-27 15:16:52

Canvas畫橢圓的方法

Canvas畫橢圓的方法: 雖然標題是畫橢圓，但是我們先來說說Canvas中的圓相信大家對于Canvas畫圓都不陌生oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示，直接調用API就可以了，但是計算機內部卻是使用光柵學，利用bresenham算法畫圓的，這個我們放到最后來說

推薦度：

點擊下載本文 文檔為doc格式

導讀Canvas畫橢圓的方法: 雖然標題是畫橢圓，但是我們先來說說Canvas中的圓相信大家對于Canvas畫圓都不陌生oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示，直接調用API就可以了，但是計算機內部卻是使用光柵學，利用bresenham算法畫圓的，這個我們放到最后來說

　　雖然標題是畫橢圓，但是我們先來說說Canvas中的圓

　　相信大家對于Canvas畫圓都不陌生

oGC.arc(400, 300, 100, 0, 2*Math.PI, false);

　　如上所示，直接調用API就可以了，但是計算機內部卻是使用光柵學，利用bresenham算法畫圓的，這個我們放到最后來說，先說說利用圓的參數方程畫圓

circle(oGC, 400, 300, 100);
function circle(context, x, y, a) { // x,y是坐標;a是半徑
 var r = 1/a; // ①注意：此處r可以寫死，不過不同情況下寫死的值不同
 context.beginPath();
 context.moveTo(x + a, y);
 for(var i = 0; i < 2 * Math.PI; i += r) {
 context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i));
 }
 context.closePath();
 context.fill();
}

　　原理是什么，相信三角函數不錯的童鞋理解起來很容易的，如果不知道的話，注意注釋①，我變化一下r的值，相信就立竿見影了~

　　r和2*Math.PI配合就是圓的精細程度，在半徑為100的時候，r取1/10就可以了，通用的話可以寫死，寫成r = 1 / a;這樣無論半徑取大或者小，圓都會很精細，但是性能會有很大影響

　　現在來看看文章的主角，針對圓來看橢圓的

function EllipseOne(context, x, y, a, b) {
 var step = (a > b) ? 1 / a : 1 / b;
 context.beginPath();
 context.moveTo(x + a, y);
 for(var i = 0; i < 2 * Math.PI; i += step) {
 context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
 }
 context.closePath();
 context.fill();
}

　　和圓基本一樣，不過圓只有一個半徑，而橢圓分為長軸和短軸了。

　　看下效果~

　　好了，畫橢圓成功，文章結束~

　　怎么可能!

　　就這樣結束也太沒品了，剛剛是方法一，下面來看其他的

　　方法二，均勻壓縮法

　　這是我最喜歡的方法，易理解，相比較方法一，性能也快了很多，先貼代碼~

function EllipseTwo(context, x, y, a, b) {
 context.save();
 var r = (a > b) ? a : b;
 var ratioX = a / r;
 var ratioY = b / r;
 context.scale(ratioX, ratioY);
 context.beginPath();
 context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
 context.closePath();
 context.restore();
 context.fill();
}

　　原理是利用了scale來對一個標準的圓進行壓縮，ratioX是橫軸縮放比率，ratioY是縱軸縮放比率，就因為這兩個值不同，使得將標準圓縮放成了一個橢圓

　　記得save()和restore()還原context環(huán)境，so easy理解的方法

　　下面兩種方法很高大上，都是利用三次貝塞爾曲線法

　　方法三，四，貝塞爾法

function EllipseThree(context, x, y, a, b) {
 var ox = 0.5 * a,
 oy = 0.6 * b;
 context.save();
 context.translate(x, y);
 context.beginPath();
 context.moveTo(0, b);
 context.bezierCurveTo(ox, b, a, oy, a, 0);
 context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
 context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
 context.bezierCurveTo(-a, oy, -ox, b, 0, b);
 context.closePath();
 context.fill();
 context.restore();
}
function EllipseFour(context, x, y, a, b) {
 var k = 0.5522848,
 ox = k * a,
 oy = k * b;
 context.translate(x, y);
 context.beginPath();
 context.moveTo(-a, 0);
 context.bezierCurveTo(-a, oy, -ox, -b, 0, -b);
 context.bezierCurveTo(ox, -b, a, -oy, a, 0);
 context.bezierCurveTo(a, oy, ox, b, 0, b);
 context.bezierCurveTo(-ox, b, -a, oy, -a, 0);
 context.closePath();
 context.fill();
}

　　貝塞爾法的核心在于兩個控制點的選取，但是它有致命的問題，當lineWidth較寬的時候，橢圓較扁，長軸較尖銳，會出現不平滑的情況

　　如果不知道什么事貝塞爾的話就自行百度……這個不解釋了……

　　后面還有最后一種光柵法畫橢圓，光柵法畫圓很簡單，畫橢圓挺麻煩的，下面是最簡單的一種橢圓畫法，等于是lineWidth為1px的情況下

function EllipseFive(context, x, y, a, b) {
 var data = context.getImageData(0, 0, 800, 600);
 var imageData = data.data;
 var tx = 0;
 var ty = b;
 var d = b*b + a*a*(-b + 0.25);
 var mx = a * a / Math.sqrt(a * a + b * b);
 while(tx <= mx) {
 if(d < 0) {
 d += b * b * (2 * tx + 3);
 } else {
 ty--;
 d += b * b * (2 * tx + 3) + 2 * a * a * (1 - ty);
 
 }
 tx++;
 setPix(x + tx, y + ty);
 setPix(x + tx, y - ty);
 setPix(x - tx, y + ty);
 setPix(x - tx, y - ty);
 }
 d = b * b * (tx + 0.5) * (tx + 0.5) + a * a * (ty - 1) * (ty - 1) - a * a * b * b;
 while (ty > 0) {
 if (d < 0) {
 tx++;
 d += b*b*(2 * tx + 2) + a*a*(-2 * ty + 3);
 }
 else {
 d += a*a*(-2 * ty + 3);
 }
 ty--;
 setPix(x + tx, y + ty);
 setPix(x - tx, y + ty);
 setPix(x + tx, y - ty);
 setPix(x - tx, y - ty);
 }
 context.putImageData(data, 0, 0);
 function setPix(x, y){
 console.log(x, y);
 var index = getStartIndex(x, y);
 for(var i = 0; i< 4; i++) {
 if(i == 3) {
 imageData[index + i] = 255;
 }
 else{
 imageData[index + i] = 128;
 }
 }
 }
 function getStartIndex(x, y) {
 return y * 800 * 4 + x * 4;
 }
}

　　給個結果圖~