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

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

空心文本繪制

1. 前言

上一節(jié)我們學習了利用 fillText 繪制一行有填充的文本，既然有填充的文本，那也就有只有描邊的文字，也就是空心文本，本小節(jié)我們就學習利用 strokeText 方法繪制一行空心文本。

2. 空心文本

在 canvas 的 API 中已經(jīng)封裝了繪制空心文本的方法：strokeText。

先看一個案例：

實例演示
預覽 復制
復制成功！
<!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 標簽</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.font="40px Microsoft YaHei"
		ctx.strokeText("慕課Wiki", 40, 40) //繪制文本
	
	</script>
<body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

上面我們就繪制了一行空心文本。

3. 方法整理

本小節(jié)中我們使用到一個新的方法，strokeText，它的使用和 fillText 完全相同。

3.1 strokeText()方法

strokeText 方法作用是繪制一行空心文字。

語法：

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

變量說明：

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

4. 總結

本小節(jié)我們主要學習了第二種繪制文本的方法：strokeText ，canvas 也只有這兩種繪制文本的方法。繪制文本時有一個注意事項：這兩種繪制文本方法都只能繪制單行文本，目前 canvas 不支持繪制多行文本。