亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

水車_ · 更新于 2021-02-23

繪制橢圓

1. 前言

我們今天主要學習繪制橢圓的原生的方法 ellipse()， 因為這個方法目前還在實驗當中，在各大瀏覽器中的兼容性不是太好，我們在開發過程中需要注意。

下圖是 ellipse() 的兼容性說明：

2. 利用 ellipse 方法繪制橢圓

我們知道橢圓有一個中心點，即橢圓的兩個焦點連線的中心，還有一個長軸和短軸，我們在調用 ellipse() 方法時，就需要用到這幾個概念。

先看整體案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.ellipse(150, 150, 100, 50, 45 * Math.PI/180, 0, 2*Math.PI);  //調用了直接繪制橢圓的函數
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

這樣我們就繪制了一個橢圓。

3. ellipse 方法參數

ellipse 方法有7個必填參數和一個可選參數，我們詳細地說明一下這幾個參數的用途。

語法：

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

第1、2個參數表示的是橢圓中心點的坐標，第3、4個參數表示的是長半軸和短半軸的長度，第5個參數表示的是橢圓的旋轉角度，這里需要注意它的值也是以弧度表示的，和第6、7個參數的值類型是一樣的，第6、7個參數表示的是橢圓的起始角和結束角。

第8個參數是一個可選參數，表示的是順時針繪制還是逆時針繪制。繪制橢圓的后三個參數和我們繪制圓的最后三個參數的含義是一樣的。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=300
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle="#456795";
		ctx.lineWidth=8;
		
		ctx.ellipse(150, 150, 100, 50, 0, 0.5*Math.PI, 1.5*Math.PI)
		ctx.closePath()
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

執行結果：

我們可以看到左半個橢圓已經繪制好了，這里執行了 closePath() 就可以得到一條閉合的路徑了。

4. 方法整理

本小節中我們使用到一個新的方法 ellipse()。

4.1 ellipse()方法

ellipse 方法作用是繪制一個中點在 (x, y) 的橢圓。

變量說明：

變量名 類型 是否必須 說明
x Number 是 指定橢圓中心位置的X坐標。
y Number 是 指定橢圓中心位置的Y坐標。
radiusX Number 是 橢圓長半軸。
radiusY Number 是 橢圓短半軸。
rotation Number 是 橢圓的旋轉角度，以弧度表示（非角度度數）。
sAngle Number 是 起始角，以弧度計，（弧的圓形的三點鐘位置是 0 度）。
eAngle Number 是 結束角，以弧度計。
counterclockwise Boolean 否 規定應該逆時針還是順時針繪圖，false = 順時針，true = 逆時針。

5. 總結

本小節我們主要學習了利用 ellipse 方法繪制一個橢圓。由于兼容性的問題，我們在后面的小節中還會學到兼容性更好的繪制橢圓的方法。