在javascript中在画布上创建文本大纲

2 html javascript text canvas outline

在画布上绘图时,如何在JavaScript中为文本提供大纲?请参阅下面我尝试做的图片.

在此输入图像描述

小智 7

Daniel Langh向我展示了解决方案:

var txt = 'Hello World!';
var x = 30,
    y = 50;

context.font = "40px Helvetica";

context.strokeStyle = 'white';

// setup these to match your needs
context.miterLimit = 2;
context.lineJoin = 'circle';

// draw an outline, then filled
context.lineWidth = 7;
context.strokeText(txt, x, y);
context.lineWidth = 1;
context.fillText(txt, x, y);
Run Code Online (Sandbox Code Playgroud)

  • 我遇到了同样的问题,我看到了这个答案.`miterLimit`选项修复了线尖峰,但我最满意的只是`context.lineJoin ='round';` (2认同)