画布 context.fillText() 与 context.strokeText()答案

【问题标题】：Canvas context.fillText() vs context.strokeText()画布 context.fillText() 与 context.strokeText()
【发布时间】：2014-09-12 21:07:37
【问题描述】：

context.fillText() 和context.strokeText() 除了前者使用context.fillStyle 而后者使用context.strokeStyle 之外，还有什么区别。他们没有添加context.textStyle 属性的任何原因？

【问题讨论】：

标签： html canvas

【解决方案1】：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.strokeStyle = 'green'
ctx.lineWidth = 3;
ctx.font = '90px verdana';
ctx.fillText('Q', 50, 100);
ctx.strokeText('Q', 125, 100);
ctx.fillText('Q', 200, 100);
ctx.strokeText('Q', 200, 100);

&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;

是的，strokeText 实际上描边了字母的轮廓，而 fillText 填充了字母的内部。

【讨论】：

啊酷，我想我只是创建了太小的文本，以至于无法注意到 strokeText 属性。谢谢。
在给定代码中调用了 4 次 Q，但 3Q 在图像中？
@diEcho 第 3 次和第 4 次调用绘制到同一个 Q，一个用于填充，一个用于描边。