html5 canvas width,HTML5 Canvas and Line Width

weixin_39809168

于 2021-06-30 13:02:18 发布

阅读量104

点赞数

文章标签： html5 canvas width

本文介绍了一个关于Canvas绘图中线条粗细不均匀的问题及解决方案。作者最初使用了不当的方法绘制一系列相连的线段，导致线条从开始到结束逐渐变细。通过调整绘图逻辑，将所有绘图方法放置于循环内部，最终解决了线条粗细不均的问题。

摘要由CSDN通过智能技术生成

I just solved a problem of a similar nature. It involved a bug in a For loop.

PROBLEM: I had created a for loop to create a series of connected line segments and noticed that the line was thick to start but thinned out significantly by the final segment (no gradients were explicitly used).

FIRST, DEAD END THOUGHT: At first I assumed it was the above pixel issue, but the problem persisted even after forcing all the segments to remain at a constant level.

OBSERVATION: I noticed that I made a newbie's mistake -- I only used a single "ctx.beginPath()" and "ctx.moveTo(posX,posY)" PRIOR to the For loop and a single "ctx.stroke()" AFTER the For loop and the loop itself wrapped a single ctx.lineTo().

SOLUTION: Once I moved all methods (.beginPath(), .moveTo(), .lineTo() and .stroke()) together into the For loop so they would all be hit on each iteration, the problem went away. My connected line had the desired uniform thickness.