HTML5 画布和线宽

如果您考虑从 (3,1) 到 (3,5) 的路径，其线宽为1.0，您最终会遇到第二张图片中的情况.实际上要填充的区域(深蓝色)仅延伸到像素的一半路径的两边.必须呈现一个近似值，这意味着那些像素仅被部分着色，结果在整个区域(浅蓝色和深蓝色)被填充颜色只有实际笔触颜色的一半深.这是什么发生在前面示例代码中的 1.0 宽度线.要解决此问题，您必须非常精确地创建路径.知道 1.0 宽度的线会向两边延伸半个单位的路径，创建从 (3.5,1) 到 (3.5,5) 的路径会导致第三张图片中的情况——1.0 线宽完全结束并精确填充单个像素垂直线.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. 解决方案 Javascript:var badCanvas = document.getElementById("badCanvas"), goodCanvas = document.getElementById("goodCanvas"), bCtx = badCanvas.getContext("2d"), gCtx = goodCanvas.getContext("2d");badCanvas.width = goodCanvas.width = badCanvas.height = goodCanvas.height = 300;// Line example where the lines are blurry weird ect.// HorizontalbCtx.beginPath();bCtx.moveTo(10,10);bCtx.lineTo(200,10);bCtx.stroke();//VerticlebCtx.beginPath();bCtx.moveTo(30,30);bCtx.lineTo(30,200);bCtx.stroke();// Proper way to draw them so they are "clear"//HorizontalgCtx.beginPath();gCtx.moveTo(10.5,10.5);gCtx.lineTo(200.5,10.5);gCtx.stroke();//VerticlegCtx.beginPath();gCtx.moveTo(30.5,30);gCtx.lineTo(30.5,200);gCtx.stroke();// Change the line widthbCtx.lineWidth = 4;gCtx.lineWidth = 4;// Line example where the lines are blurry weird ect.// HorizontalbCtx.beginPath();bCtx.moveTo(10,20.5);bCtx.lineTo(200,20.5);bCtx.stroke();//VerticlebCtx.beginPath()bCtx.moveTo(50.5,30);bCtx.lineTo(50.5,200);bCtx.stroke();// Proper way to draw them so they are "clear"//HorizontalgCtx.beginPath();gCtx.moveTo(10,20);gCtx.lineTo(200,20);gCtx.stroke();//VerticlegCtx.beginPath();gCtx.moveTo(50,30);gCtx.lineTo(50,200);gCtx.stroke();HTML:<h2>BadCanvas</h2><canvas id="badCanvas"></canvas><h2>Good Canvas</h2><canvas id="goodCanvas"></canvas>CSS:canvas{border:1px solid blue;}Live DemoMy 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 ArticleIf you consider a path from (3,1) to (3,5) with a line thickness of1.0, you end up with the situation in the second image. The actualarea to be filled (dark blue) only extends halfway into the pixels oneither side of the path. An approximation of this has to be rendered,which means that those pixels being only partially shaded, and resultsin the entire area (the light blue and dark blue) being filled in witha color only half as dark as the actual stroke color. This is whathappens with the 1.0 width line in the previous example code.To fix this, you have to be very precise in your path creation.Knowing that a 1.0 width line will extend half a unit to either sideof the path, creating the path from (3.5,1) to (3.5,5) results in thesituation in the third image — the 1.0 line width ends up completelyand precisely filling a single pixel vertical line. 这篇关于HTML5 画布和线宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！