首页 > 开发 > CSS > 正文

怎么解决canvas lineWidth 沿线 居中的问题?

2017-09-12 09:39:44  来源: 网友分享

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

解决方案

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

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