如何在HTML5 Canvas的文本上添加边框？ [英] How to add a border on HTML5 Canvas' Text?

问题描述

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

  myCanvas.fillStyle =Red 
 myCanvas.font =30pt Arial; 
 myCanvas.fillText（Some Text，10，30）; 
  

但是我想在Some Text周围添加边框， >

解决方案

使用 strokeText（）和 strokeStyle。 / code>例如：

  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>  

I can draw text using the below code,

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

But I want to add a border around "Some Text", any ideas on that?

解决方案

Use strokeText() and the strokeStyle. eg:

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>

这篇关于如何在HTML5 Canvas的文本上添加边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！