HTML5 Canvasのテキストに境界線を追加する方法は?
-
07-07-2019 - |
質問
以下のコードを使用してテキストを描画できます
myCanvas.fillStyle = "Red";
myCanvas.font = "30pt Arial";
myCanvas.fillText("Some Text", 10, 30);
でも" Some Texts"の周りに境界線を追加したいのですが、それについてのアイデアはありますか
解決
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>
他のヒント
strokeStyle メソッドを使用してテキストまたはアウトラインの周囲に境界線を描画し、 lineWidth メソッドを使用してストロークラインの幅を定義できます。
<script>
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
</script>
</body>
はどうですか
myCanvas.style.border = "red 1px solid";
所属していません StackOverflow