javascript - 如何在 HTML5 Canvas 的文本上添加边框？

Question

我可以使用下面的代码绘制文本，

myCanvas.fillStyle = "Red";
myCanvas.font = "30pt Arial";
myCanvas.fillText("Some Text", 10, 30);

但是我想在“一些文本”周围添加一个边框，对此有什么想法吗？

Answer 1

使用 strokeText() 和 strokeStyle。 例如:

canvas = document.getElementById("myc");
context = canvas.getContext('2d');

context.fillStyle = 'red';
context.strokeStyle = 'black';

context.font = '20pt Verdana';
context.fillText('Some text', 50, 50);
context.strokeText('Some text', 50, 50);

context.fill();
context.stroke();

<canvas id="myc"></canvas>