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

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

文本繪制

1. 前言

canvas 中不光是繪制一些圖案，有時(shí)候我們還需要對文字進(jìn)行繪制，本小節(jié)我們就學(xué)習(xí) canvas 中如何繪制文本。

2. 繪制文本

在 canvas 的 API 中已經(jīng)封裝了繪制文本的方法：fillText，我們可以直接調(diào)用使用。

先看一個(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');
		const ctx = canvas.getContext('2d');
		
		ctx.fillText("慕課Wiki", 20, 20) //繪制文本
	
	</script>
<body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

上面我們就繪制了一行文本，但是我們可以發(fā)現(xiàn)，這個(gè)字很小，如果我們想自定義字體樣式，那就需要用到設(shè)置字體屬性：font 了，在 canvas 中使用 font 和 CSS font 規(guī)范相同。

看一個(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');
		const ctx = canvas.getContext('2d');
		
		ctx.fillStyle = "#456795"
		ctx.font="60px  Microsoft YaHei"  //設(shè)置字體樣式
		ctx.fillText("慕課Wiki", 20, 100)  //繪制文本
	
	</script>
<body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

這樣我們就繪制了 60px 的微軟雅黑文字。

3. 方法整理

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

3.1 fillText()方法

fillText 方法作用是繪制一行文字。

語法：

void ctx.fillText(text, x, y [, maxWidth]);

變量說明

變量名 類型 是否必須 說明
text String 是 要繪制的文本。
x Number 是 文本起始點(diǎn)的 x 軸坐標(biāo)。
y Number 是 文本起始點(diǎn)的 y 軸坐標(biāo)。
maxWidth Number 是 可選，需要繪制的最大寬度。如果指定了值，并且經(jīng)過計(jì)算字符串的寬度比最大寬度還要寬，字體為了適應(yīng)會使用一個(gè)水平縮小的字體或者小號的字體。

4. 屬性整理

本小節(jié)中我們使用到一個(gè)新的屬性，它就是 font，此屬性和 CSS 的 font 屬性值相同。

4.1 font 屬性

font 屬性作用是設(shè)置繪制文本的樣式。

變量說明：

屬性名 類型 說明
font String 符合 CSS font 語法的字符串，默認(rèn)字體是 10px sans-serif。

5. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 fillText 方法繪制一行文本，利用 font 設(shè)置繪制文本的樣式。下一小節(jié)我們將學(xué)習(xí)如何繪制空心文本。