本文介绍了HTML5画布和线宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在画布上绘制线条图。线条画的很好。图形被缩放,每个段被绘制,颜色是确定的等等。我唯一的问题是在视觉上线宽变化。它几乎像一支书法笔的笔尖。如果行程向上,线条很薄,如果行程是水平的,则线条更粗。



我的线条粗细是常数,我的 strokeStyle 设置为 black 。我没有看到任何影响这种变化线宽的画布属性,但必须有。

解决方案


I'm drawing line graphs on a canvas. The lines draw fine. The graph is scaled, every segment is drawn, color are ok, etc. My only problem is visually the line width varies. It's almost like the nib of a caligraphy pen. If the stroke is upward the line is thin, if the stroke is horizontal, the line is thicker.

My line thickness is constant, and my strokeStyle is set to black. I don't see any other properties of the canvas that affect such a varying line width but there must be.

解决方案

Live Demo

My live demo basically just recreates what the MDN says. For even stroke widths you can use integers for coordinates, for odd stroke widths you want to use .5 to get crisp lines that fill the pixels correctly.

From MDN Article

这篇关于HTML5画布和线宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 19:13