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

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

繪制橢圓

1. 前言

我們今天主要學(xué)習(xí)繪制橢圓的原生的方法 ellipse()， 因?yàn)檫@個(gè)方法目前還在實(shí)驗(yàn)當(dāng)中，在各大瀏覽器中的兼容性不是太好，我們?cè)陂_發(fā)過程中需要注意。

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

2. 利用 ellipse 方法繪制橢圓

我們知道橢圓有一個(gè)中心點(diǎn)，即橢圓的兩個(gè)焦點(diǎn)連線的中心，還有一個(gè)長軸和短軸，我們?cè)谡{(diào)用 ellipse() 方法時(shí)，就需要用到這幾個(gè)概念。

先看整體案例：

實(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, 45 * Math.PI/180, 0, 2*Math.PI);  //調(diào)用了直接繪制橢圓的函數(shù)
		
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

這樣我們就繪制了一個(gè)橢圓。

3. ellipse 方法參數(shù)

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

語法：

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

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

第8個(gè)參數(shù)是一個(gè)可選參數(shù)，表示的是順時(shí)針繪制還是逆時(shí)針繪制。繪制橢圓的后三個(gè)參數(shù)和我們繪制圓的最后三個(gè)參數(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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

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

4. 方法整理

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

4.1 ellipse()方法

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

變量說明：

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

5. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 ellipse 方法繪制一個(gè)橢圓。由于兼容性的問題，我們?cè)诤竺娴男」?jié)中還會(huì)學(xué)到兼容性更好的繪制橢圓的方法。