HTML5 캔버스의 텍스트에 테두리를 추가하는 방법은 무엇입니까?
-
07-07-2019 - |
문제
아래 코드를 사용하여 텍스트를 그릴 수 있습니다.
myCanvas.fillStyle = "Red";
myCanvas.font = "30pt Arial";
myCanvas.fillText("Some Text", 10, 30);
그러나 나는 "일부 텍스트"에 국경을 추가하고 싶습니다.
해결책
사용 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>
다른 팁
우리는 사용할 수 있습니다 뇌졸중 텍스트 또는 개요 주위에 테두리를 그리는 방법을 사용하면 사용할 수 있습니다. 선의 폭 방법 스트로크 라인의 너비를 정의하는 방법.
<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