在制作 HTML5 Canvas 绘图时，我们经常会使用 stroke() 函数来绘制路径。但有时候我们会发现，当线条比较粗或者颜色比较暗时，stroke() 函数绘制出来的线条会显得模糊或者粗糙。这个问题是由于 Canvas 的线条默认情况下是中心对齐的，导致画出来的线条边缘不够锐利。
这篇文章将介绍如何解决这个问题，并提供实际例子以及代码。
解决方案
要解决这个问题，我们需要做两件事情：
- 将线条的位置调整为边缘对齐，从而使线条更加清晰锐利；
- 对于较宽的线条，我们需要使用
lineJoin和lineCap属性来使得线条的交点和端点更加自然。
边缘对齐
要将线条的位置调整为边缘对齐，我们需要将线条的坐标向内移动半个像素。例如，如果你想要绘制一个 2 像素宽度的红色线条，则可以使用以下代码：
------------- - -- --------------- - ------ ---------------- -------------- ------ -------------- ------ -------------
在这个例子中，我们将线条的起点和终点的 Y 坐标都加上了 0.5，这样就可以将线条的位置调整为边缘对齐了。
lineJoin 和 lineCap 属性
对于较宽的线条，我们需要使用 lineJoin 和 lineCap 属性来使得线条的交点和端点更加自然。默认情况下，lineJoin 和 lineCap 的值都是 miter。但是，当线条的宽度比较大时，线条的交点会变得尖锐，会出现所谓的“奇怪的角”。为了避免这种情况，我们可以使用 round 或者 bevel 来代替 miter。
------------- - --- ------------ - -------- ----------- - -------- --------------- - ------- ---------------- -------------- ---- --------------- ----- --------------- ---- -------------
在这个例子中，我们将 lineJoin 和 lineCap 的值都设置为 round，从而使得线条的交点和端点更加自然。
示例代码
--------- -----
------
------
----- ----------------
------------- ----------------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
-- ----
------------- - --
--------------- - ------
----------------
-------------- ------
-------------- ------
-------------
-- -------- - ------- --
------------- - ---
------------ - --------
----------- - --------
--------------- - -------
----------------
-------------- ----
--------------- -----
--------------- ----
-------------
---------
-------
-------总结
通过本文的介绍，我们知道了如何解决 HTML5 Canvas 绘图中 stroke() 函数绘制出来的线条模糊和粗糙的问题。边缘对齐和
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31475