您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

空心文本绘制

上一节我们学习了利用 fillText 绘制一行有填充的文本,既然有填充的文本,那也就有只有描边的,也就是空心文本,本小节我们就学习利用 Text 绘制一行空心文本。

在 canvas 的 API 中已经封装了绘制空心文本的:Text

先看案例:

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px 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.Text("Wiki", , ) //绘制文本
	
	</script>
<body>
</html>

运行结果:

上面我们就绘制了一行空心文本。

本小节中我们使用到新的,Text,它的使用和 fillText 完全相同。

Text 作用是绘制一行空心。

语法:

变量说明:

本小节我们主要学习了第二种绘制文本的:Text ,canvas 也只有这两种绘制文本的。绘制文本时有注意事项:这两种绘制文本都只能绘制单行文本,目前 canvas 绘制多行文本。


联系我
置顶