素材牛VIP会员
canvas画出的圆0度90度180度360度的地方明显感觉没有其他地方圆,是什么原因
 Fo***ou  分类:Html5  人气:1329  回帖:2  发布于6年前 收藏

用Canvas绘制出来的圆0度90度180度360度的地方明显比其他地方要平一些~ 是canvas本身的问题还是有其他解决方法

 标签:arccanvashtml5

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv6 码匠
sh***ng 交互设计师 6年前#1

不是抗鋸齒的問題,我也遇到過。

是因爲 canvas 尺寸和圓尺寸正好一致,而 canvas 繪製圓的時候,卻是以 radius 作爲 lineWidth 的中心而非外圍,所以導致被截取半個 lineWidth。

只要讓 canvas 尺寸向四周增加半個 lineWidth 即可。

Lv3 码奴
风***灬 页面重构设计 6年前#2

可能是画布或者浏览器没有开启抗锯齿的原因(旁边的文字也有锯齿)。手动开启HTML5 Canvas的抗锯齿可以用

canvas.getContext('2d').imageSmoothingEnabled = true;

或者直接把整个画布偏移0.5像素:

canvas.getContext('2d').translate(0.5, 0.5);
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取