html5 - 怎么解决canvas lineWidth 沿线 居中的问题？

Question

globalCompositeOperation = "xor" 的情况下
画了个圆 并且给 设置了 lineWidth 结果发现 内外边距各占一半
然后问题就来了，内边距和圆本来重叠的部分触发了 xor 透明了。。。
我设置 xor 是因为有个背景色 想让整个圆透明 漏出 canvas下面的图片

Answer 1

描边（stroke）的时候本来就是会将线骑在边框上画，于是会跟填充（fill）有重叠的部分，这是正常的。

你如果要用 xor 清除内容，那么就先清除，之后恢复 globalCompositeOperation 为默认值 "source-over"，最后再画一个新的圆形路径用来描边。描边的时候还需要考虑 lineWidth 对实际描的区域的影响，适当的画大一点。