第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

繪制橢圓

1. 前言

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

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

2. 利用 ellipse 方法繪制橢圓

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

先看整體案例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</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);  //調(diào)用了直接繪制橢圓的函數(shù)
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

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

3. ellipse 方法參數(shù)

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

語法：

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

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

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

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</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>
運行案例 點擊 "運行案例" 可查看在線運行效果

執(zhí)行結(jié)果：

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

4. 方法整理

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

4.1 ellipse()方法

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

變量說明：

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

5. 總結(jié)

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