web-dev-qa-db-ja.com

HTML5 Canvasのテキストに境界線を追加するにはどうすればよいですか？

以下のコードを使用してテキストを描画できます。

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

しかし、「いくつかのテキスト」の周りに境界線を追加したいのですが、それについて何かアイデアはありますか？

javascripthtmlcanvas
16
DNB5brims

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>
32
Richard Heyes

使用できます ストロークスタイル テキストやアウトラインの周りに境界線を描く方法、そして私たちは使用することができます lineWidth ストロークラインの幅を定義するメソッド。

var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');

ctx.strokeStyle= "red"; //set the color of the stroke line 
ctx.lineWidth = 3;  //define the width of the stroke line
ctx.font = "italic bold 35pt Tahoma"; //set the font name and font size
ctx.strokeText("StackOverFlow",30,80); //draw the text
<canvas id="Canvas01" width="400" height="400" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>
4
MichaelCalvin