在HTML5 Canvas的图形绘制场景中，文本描边是提升文本视觉层次感的常用操作，但不少开发者在执行描边绘制时，会发现文本笔画的拐角处出现超出预期的尖锐突起，也就是尖角伪影，这类问题会直接影响最终呈现的美观度。
尖角伪影的产生原因
Canvas绘制描边时，默认使用斜接连接（miter join）样式处理笔画拐角，这种样式会把两个笔画的外边缘延伸相交，形成尖角。当两个笔画的夹角较小时，延伸出来的尖角长度会远超过描边宽度，就形成了明显的尖角伪影。而miterLimit属性就是用来限制这个尖角的最大长度的。
miterLimit属性详解
miterLimit是Canvas 2D上下文的一个属性，它定义了斜接长度与描边宽度的最大比值，默认值为10。斜接长度指的是拐角尖角到两个笔画内边缘交点的距离，当计算出的斜接长度超过miterLimit乘以描边宽度的值时，Canvas会自动把连接样式切换为斜角连接（bevel join），避免尖角过长。
具体的计算逻辑如下：假设描边宽度为lineWidth，两个笔画的夹角为θ，那么斜接长度等于lineWidth / (2 * sin(θ/2))。当这个长度大于lineWidth * miterLimit时，就会触发连接样式切换。
解决尖角伪影的代码示例
下面通过一个完整的示例展示如何通过调整miterLimit属性消除文本描边的尖角伪影：
// 获取canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
canvas.width = 800;
canvas.height = 300;
// 绘制背景
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 第一组：使用默认miterLimit，会出现尖角伪影
ctx.font = 'bold 80px Arial';
ctx.lineWidth = 8;
ctx.lineJoin = 'miter'; // 默认连接样式
ctx.miterLimit = 10; // 默认值
ctx.strokeStyle = '#ff0000';
ctx.strokeText('测试文本', 50, 120);
ctx.fillStyle = '#333';
ctx.font = '16px Arial';
ctx.fillText('默认miterLimit=10，出现尖角伪影', 50, 150);
// 第二组：调整miterLimit为较小值，消除伪影
ctx.font = 'bold 80px Arial';
ctx.lineWidth = 8;
ctx.lineJoin = 'miter';
ctx.miterLimit = 2; // 减小miterLimit值
ctx.strokeStyle = '#00aa00';
ctx.strokeText('测试文本', 50, 250);
ctx.fillStyle = '#333';
ctx.font = '16px Arial';
ctx.fillText('调整miterLimit=2，尖角伪影消除', 50, 280);
将上述代码对应的HTML结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas文本描边尖角伪影消除示例</title>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持Canvas</canvas>
<script src="script.js"></script>
</body>
</html>
参数调整建议
在实际开发中，可以根据文本的字号和笔画特点调整miterLimit的值：
- 如果文本字号较小、笔画夹角较大，可以适当调大
miterLimit，保留自然的斜接拐角 - 如果文本笔画较细、夹角较小，建议将
miterLimit设置为2到4之间，避免尖角过长 - 若不需要斜接效果，也可以直接将
lineJoin设置为round或bevel，从连接样式层面避免伪影
注意事项
需要注意miterLimit属性只对miter连接样式生效，如果已经将lineJoin设置为其他值，调整该属性不会有任何效果。另外，不同字体的笔画结构存在差异，建议针对使用的字体做参数测试，找到最合适的miterLimit取值。
CanvasmiterLimit文本描边HTML5修改时间：2026-07-16 15:33:24