HTML5 Canvas中繪製橢圓的5種方法

阿新 • • 發佈：2019-01-20

1.canvas自帶的繪製橢圓的方法

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是現在更新的，

引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>橢圓</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    當前瀏覽器不支援Canvas，請更換瀏覽器後再試
</canvas>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var  ctx=canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 800;
        if(ctx.ellipse){
            ctx.ellipse(400,400,300,200,0,0,Math.PI*2);
            ctx.fillStyle="#058";
            ctx.strokeStyle="#000";
            ctx.fill();
            ctx.stroke();
        }else{
            alert("no ellipse!");
        } 
    }
</script>
</body>
</html>

目前只有谷歌可以支援，其他瀏覽器還未存在ellipse();不過相信不久的將來，我們就可以很容易的繪製出橢圓了。

下面這幾種方法是我在網上看到的，在此也做個總結：

1.用引數方程繪製橢圓

//函式的引數x,y為橢圓中心；a,b分別為橢圓橫半軸、
//縱半軸長度，不可同時為0
//該方法的缺點是，當lineWidth較寬，橢圓較扁時
//橢圓內部長軸端較為尖銳，不平滑，效率較低

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>橢圓</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    當前瀏覽器不支援Canvas，請更換瀏覽器後再試
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle="black";
        ParamEllipse(context, 130, 80, 100, 20); //橢圓
    function ParamEllipse(context, x, y, a, b){
        //max是等於1除以長軸值a和b中的較大者
        //i每次迴圈增加1/max，表示度數的增加
        //這樣可以使得每次迴圈所繪製的路徑（弧線）接近1畫素
        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)
        {
        //引數方程為x = a * cos(i), y = b * sin(i)，
        //引數為i，表示度數（弧度）
        context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
        }
        context.closePath();
        context.stroke();
    };
</script>
</body>
</html>

2.均勻壓縮法繪製橢圓

//其方法是用arc方法繪製圓，結合scale進行
//橫軸或縱軸方向縮放（均勻壓縮）
//這種方法繪製的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
//邊離短軸越近、橢圓越扁越細，甚至產生間斷，這是scale導致的結果
//這種缺點某些時候是優點，比如在表現環的立體效果（行星光環）時
//對於引數a或b為0的情況，這種方法不適用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>橢圓</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    當前瀏覽器不支援Canvas，請更換瀏覽器後再試
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle="black";
       EvenCompEllipse(context, 130, 200, 100, 20); //橢圓
    function EvenCompEllipse(context, x, y, a, b){
        context.save();
        //選擇a、b中的較大者作為arc方法的半徑引數
        var r = (a > b) ? a : b; 
        var ratioX = a / r; //橫軸縮放比率
        var ratioY = b / r; //縱軸縮放比率
        context.scale(ratioX, ratioY); //進行縮放（均勻壓縮）
        context.beginPath();
        //從橢圓的左端點開始逆時針繪製
        context.moveTo((x + a) / ratioX, y / ratioY);
        context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
        context.closePath();
        context.stroke();
        context.restore();
    };
</script>
</body>
</html>

3.使用三次貝塞爾曲線模擬橢圓1

//此方法也會產生當lineWidth較寬，橢圓較扁時，
//長軸端較尖銳，不平滑的現象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>橢圓</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    當前瀏覽器不支援Canvas，請更換瀏覽器後再試
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle="black";
        BezierEllipse1(context, 470, 80, 100, 20); //橢圓
    function BezierEllipse1(context, x, y, a, b){
        //關鍵是bezierCurveTo中兩個控制點的設定
        //0.5和0.6是兩個關鍵係數（在本函式中為試驗而得）
        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.stroke();
        context.restore();
    };
</script>
</body>
</html>

4.使用三次貝塞爾曲線模擬橢圓2

//此方法也會產生當lineWidth較寬，橢圓較扁時
//，長軸端較尖銳，不平滑的現象
//這種方法比前一個貝塞爾方法精確度高，但效率稍差

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>橢圓</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    當前瀏覽器不支援Canvas，請更換瀏覽器後再試
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle="black";
        BezierEllipse2(context, 470, 200, 100, 20); //橢圓
    function BezierEllipse2(ctx, x, y, a, b){
        var k = .5522848,
        ox = a * k, // 水平控制點偏移量
        oy = b * k; // 垂直控制點偏移量</p> <p> ctx.beginPath();
        //從橢圓的左端點開始順時針繪製四條三次貝塞爾曲線
        ctx.moveTo(x - a, y);
        ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
        ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
        ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
        ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
        ctx.closePath();
        ctx.stroke();
    };
</script>
</body>
</html>

HTML5 Canvas中繪製橢圓的5種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是現在

HTML5 Canvas中繪製橢圓的幾種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是後來新增的，引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

HTML5 Canvas中繪製線段

繪製線段呼叫lineTo()方法繪製線段。lineTo(x, y)方法把當前點和lineTo()方法指定的點(x, y)用線段連線起來。如果要繪製多條線段，可以重複呼叫該方法。第一次呼叫，當前點為子路徑的起點，以後每次呼叫，都會把上一次的終點作為本次的起點。我們使用lineT

在HTML5的Canvas上繪製橢圓的幾種方法(轉)

概述 HTML5中的Canvas並沒有直接提供繪製橢圓的方法，下面是對幾種繪製方法的總結。各種方法各有優缺，視情況選用。各方法的引數相同： context為Canvas的2D繪圖環境物件，x為橢圓中心橫座標，y為橢圓中心縱座標，a為橢圓橫半軸長，b為橢圓縱半軸長

HTML5 | Canvas中變量作用域與setInterval()方法的影響

通過 value utf 出現 close span arc shadow cli Demo - 隨機繪制圓環實現思路：將一個圓環的繪制分成100份，setInterval()方法定義每隔時間n繪制一段新的，每份的開始路徑都是上一次的結束路徑，實現步進繪制。通

Shell腳本中計算字符串長度的5種方法及從文本獲取某一行

文件問題 txt abc 多種方法 file mtime 計算字符串長度賦值有時在Linux操作系統中需要計算某個字符串的長度，通過查詢資料整理了下目前Shell中獲取字符串的長度的多種方法，在這裏分享給大家，方法如下：方法1: 使用wc -L命令wc -L可以獲取

[譯]在Linux中清空或刪除大檔案內容的5種方法

原文來源: https://www.tecmint.com/empty-delete-file-content-linux/ 有時，在處理Linux終端中的檔案時，您可能希望清除檔案的內容，而無需使用任何Linux命令列編輯器開啟它。怎麼能實現這一目標？在本文中，我們將藉助一些有用的命令，通過幾種不同的方式

5種方法去掉HTML中Inline-Block元素之間的空白

display: inline-block 是個很好用的樣式，當你需要多個塊狀元素在同一行時你的第一反應就是它。有了它，你不在需要讓這些元素去“block”和“float”，然後再去處理由於“float”引起的佈局問題。但有一個問題，當使用inline-block時，HTML元素之間的空白會顯示在頁面上，這讓

在應用程式中替換Linux中Glibc的malloc的5種方法

打算優化系統的記憶體分配，接管glibc提供的記憶體管理，但是整個工程的程式碼量很大，使用malloc、realloc、calloc和free的地方到處都是，如果自己寫好的介面需要重新命名所有的呼叫，先不說工作量，部分沒有許可權檢視程式碼的.a檔案就搞不定了。所以需要替換掉系統的malloc，保證原

在Linux中檢查可用記憶體的5種方法

作為Linux使用者，特別是管理員，我們需要檢查系統使用多少記憶體資源以及有多少記憶體資源是空閒的。我們還知道，通過Linux命令列而不是圖形使用者介面可以更好地實現大多數與管理相關的任務。例如，伺服器主要在shell上工作，並且首先沒有可用的UI。由於最重要的是要檢查伺服器上的記憶體資源，因此最好學習可以幫

java中初始List的5種方法

1.構造 List 後使用 List.add 初始化 List<String> stringList = new LinkedList<>(); stringList.add("a"); stringList.add("b"); stringLi

js中建立物件的5種方法

1、原始模式 var dog = { name: jack, length: 70, wang:function(){ console.log(this.name); } 2、工廠模式（批量） function creatdog

js中創建對象的5種方法

func 模式 div style win function col cti .proto 1、原始模式 var dog = { name: jack, length: 70, wang:function(){ conso

5種方法告訴你怎麼從圖片中提取文字

說到圖片提取文字，有時候我們還真的會遇到這樣的情況。今天我跟大家分享提取文字的好方法，分為手機端、PC端和線上端，大夥兒自個兒看著用吧。一、手機端 1、QQ 有沒有很意外？現在使用QQ的人好像越來越少了，不過QQ中就有圖片提取文字功能。操作方法：把需要識別的圖片發

Oracle中呼叫函式的5種方法

--表主體： SQL> SELECT * FROM emp_pl; EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO ----- ---------- --------- -

在Node.js中發起HTTP請求的5種方法

深入解析Node.js中5種發起HTTP請求的方法翻譯：瘋狂的技術宅英文標題：5 Ways to Make HTTP Requests in Node.js 原文連結：www.twilio.com/blog/2017/0… 建立HTTP請求使現代程式語言的核心功能之一，也是

在Linux終端中進行算術運算的5種方法

在本文中，我們將向您展示在Linux終端中進行算術運算的各種有用方法。在本文結束時，您將學習在命令列中進行數學計算的基本不同實用方法。讓我們開始吧！ 1.使用Bash Shell 在Linux CLI上進行基本數學運算的第一個也是最簡單的方法是使用雙括號。以下是我們使用儲存在變數中的值的一些示例：

html5 canvas中的屬性和方法詳解

建立一個Canvas畫布的方法如下 <canvas id=”canvas” width=”600” height=”400”></canvas> 可以在標籤中新增<canvas>標籤不可用時的替代文字，如下所示： <canv

java中列印陣列的5種方法

Arrays.toString(arr) for(int n: arr) System.out.println(n+", "); for (int i = 0

在 Tableau 中使用“集”提升分析效果的 5 種方法

集可以被視為自定義段，但與維度欄位不同，它們始終是二進位制的。換句話說，您要麼在 “集” 中，要麼不在 “集” 中。除了這個限制之外，幾乎任何東西都可以建立 “集” 。您可以通過選擇放置在 “集” 中的各個維度成員建立，或基於條件建立 “集” ，還可以使用頂部或底部建立 “集

HTML5 Canvas中繪製橢圓的5種方法

相關推薦