CanvasRenderingContext2D.strokeRect()

了解CanvasRenderingContext2D.strokeRect()

简介

CanvasRenderingContext2D.strokeText()方法实现文本描边效果。此描边为居中描边。

语法

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

参数

各个参数含义和作用如下：

text

String

用来描边的文本信息。

x

Number

描边文本的起点横坐标。

y

Number

描边文本的起点纵坐标。

maxWidth

（可选）Number

填充文本占据的最大宽度，而非换行。，通过压缩每个文本宽度进行适合，当文本占据宽度超过此最大宽度时候

案例

1. 基本效果

“文字描边”文字的描边效果，JavaScript代码如下：

// 文字描边
context.font = '50px STHeiti, SimHei';
context.strokeText('文字描边', 50, 90);

实时效果如下：

2. 实色文字描边

实现方法就是叠加，文本描边效果上面叠加文本填充。因为文字描边是居中描边，如果文本描边效果在上，会使填充的文字变得很细。

// 文字样式
context.font = '50px STHeiti, SimHei';
// 文字先描边
context.lineWidth = 3;
context.strokeStyle = 'red';
context.strokeText('文字描边', 50, 90);
// 再填充
context.fillText('文字描边', 50, 90);

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:06