我可以借鑑使用下面的代碼文本,如何在HTML5 Canvas的文本上添加邊框?
myCanvas.fillStyle = "Red";
myCanvas.font = "30pt Arial";
myCanvas.fillText("Some Text", 10, 30);
但我想周圍添加邊框「一些文本」,對任何想法?
我可以借鑑使用下面的代碼文本,如何在HTML5 Canvas的文本上添加邊框?
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>
什麼
myCanvas.style.border = "red 1px solid";
這增加邊框到畫布 - 而不是在畫布上繪製內的文本;我假設op想要以字母本身的形狀創建邊框。 – dionyziz 2012-03-24 23:20:54
我們可以使用的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>
wao!我從未在SO中見過這樣的「可執行」答案。這是一個新功能嗎? – Samiron 2014-11-28 15:59:12