Question

我在HTML5中的'Canvas'中几次在该文本中绘制文本“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>

This is how the text is shown on my screen

Answer 1

我不是专家对不起我无法解释为什么，我可以告诉它是线宽，这是为了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>

现场演示 http://jsfiddle.net/maree_chaudhry/wMSfB/1/

我知道现在看起来还是一样的，如果你找到更好的方法来解决它，请与我分享：）

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

1 个答案: