在HTML画布中绘制的文本具有边

我在HTML5的“画布”中多次在文本中绘制文本“Hello World”。最外面的文本是红色，其次是黄色，里面是绿色，最里面的文本是蓝色

对于字母W上的锐边，我能做些什么

如何使文本平滑渲染

<canvas id="Can" width="1200" height="500" dir="ltr">
                <script>
                    var can = document.getElementById("Can");
                    var context = can.getContext("2d");
                    context.font = "200px Arial";
                    context.lineWidth = 40;
                    context.strokeStyle = "red";
                    context.strokeText("Hello World", 25, 200);
                    context.lineWidth = 30;
                    context.strokeStyle = "yellow";
                    context.strokeText("Hello World", 25, 200);
                    context.lineWidth = 10;
                    context.strokeStyle = "LightGreen";
                    context.strokeText("Hello World", 25, 200);
                    context.fillStyle = "blue";
                    context.fillText("Hello World", 25, 200);
                </script>
                </canvas>

var can=document.getElementById（“can”）；
var context=can.getContext（“2d”）；
context.font=“200px Arial”；
context.lineWidth=40；
context.strokeStyle=“红色”；
strokeText（“你好，世界”，25200）；
context.lineWidth=30；
context.strokeStyle=“黄色”；
strokeText（“你好，世界”，25200）；
context.lineWidth=10；
context.strokeStyle=“浅绿色”；
strokeText（“你好，世界”，25200）；
context.fillStyle=“蓝色”；
fillText（“Hello World”，25200）；

---

我不是专家抱歉，我无法解释原因，我可以说是线宽对W造成了影响

我这样做使它更平滑

<canvas id="Can" width="1200" height="500" dir="ltr">
                <script>
                    var can = document.getElementById("Can");
                    // Used for clearing the canvas
                    can.width = can.width;
                    var context = can.getContext("2d");
                    context.font = "220px Arial";
                    context.lineWidth = 11;
                    context.strokeStyle = "red";
                    context.strokeText("Hello World", 25, 202);
                    context.lineWidth = 10;
                    context.strokeStyle = "yellow";
                    context.strokeText("Hello World", 25, 202);
                    context.lineWidth = 4;
                    context.strokeStyle = "LightGreen";
                    context.strokeText("Hello World", 25, 200);
                    context.fillStyle = "blue";
                    context.fillText("Hello World", 25, 200);
                </script>
                </canvas>

var can=document.getElementById（“can”）；
//用于清理画布
can.width=can.width；
var context=can.getContext（“2d”）；
context.font=“220px Arial”；
context.lineWidth=11；
context.strokeStyle=“红色”；
strokeText（“你好，世界”，25202）；
context.lineWidth=10；
context.strokeStyle=“黄色”；
strokeText（“你好，世界”，25202）；
context.lineWidth=4；
context.strokeStyle=“浅绿色”；
strokeText（“你好，世界”，25200）；
context.fillStyle=“蓝色”；
fillText（“Hello World”，25200）；

现场演示

---

我知道它的外观不一样，但仍然很平滑，如果您找到更好的解决方法，请与我分享：）

它仍然没有回答问题，问题也显示在您的链接中。您通过减小边缘宽度使边缘变薄，但尚未完全删除边缘。可以通过将context.lineJoin设置为“round”或“斜面”（默认为“斜接”）来防止此效果。它解决了这个问题，但正如您将看到的，它完全改变了文本的最后一个方面。感谢您的帮助！如果我不想要圆角文本或斜角文本怎么办？为什么字母H是可以的，只有像V或W这样的字母才有这个问题？不客气。问题是这样宽度的“线”更适合描述为矩形，并且在遵守“斜接”约束的同时将两个矩形正确地连接在一起是困难的。H只有90度角-简单-，但是V，W和其他的都小于30度角，所以canvas用准确度换取速度-这是有道理的-但在这里失败了。字体大小/线宽比（=5）对于这种方式来说太低了。我没有看到不需要进入每个glyph（…：-O…）的解决方案，对不起。也许有人会的！