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

本文介绍了如何在HTML5 Canvas的文本上添加边框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  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的文本上添加边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！