网站建设相关的比赛,制作网页时我们应当如何规避侵权风险,wordpress无法预览,开发流程管理我们知道#xff0c;使用以下2个API可以绘制一条线段#xff1a; moveTo(x, y) 向当前路径中增加一条子路径#xff0c;该子路径只包含一个点#xff0c;此为线段的起始点lineTo(x, y) 将线段的下一个点加入子路径中context.strokeStyle rgb(200, 200, 0);
context.lineWi…我们知道使用以下2个API可以绘制一条线段 moveTo(x, y) 向当前路径中增加一条子路径该子路径只包含一个点此为线段的起始点lineTo(x, y) 将线段的下一个点加入子路径中context.strokeStyle rgb(200, 200, 0);
context.lineWidth 1;
context.beginPath();
context.moveTo(0, 50);
context.lineTo(450, 50);
context.stroke(); 但是你会发现这条线段的宽度并不是1px而是2px。 再画一条宽度为2px的线段。 context.lineWidth 2;
context.beginPath();
context.moveTo(0, 60);
context.lineTo(450, 60);
context.stroke(); 这条线段宽度与第一条相同只是颜色更深一些。 再画一条宽度为1px的线段。 context.lineWidth 1;
context.beginPath();
context.moveTo(0, 70.5);
context.lineTo(450, 70.5);
context.stroke(); 可以看到宽度确实比前两条线段窄。 为什么第一条线段的宽度不是1px呢 这与canvas的绘制逻辑有关当我们试图绘制一个线段时canvas会读取lineWidth,然后尝试将在坐标处两边各绘制一半的lineWidth比如在坐标02绘制一条水平线canvas会以坐标2 为中线向上向下各绘制0.5px。但是在1px之内不可能只绘制0.5px所以它会继续延伸填满整个像素。最后加在一起就是2px了。 如果将坐标点换成01.5沿着中心线绘制后正好填满了整个像素所以没有延伸。最后宽度就是1px。 建议 在实际应用中如果想得到更好的体验精确的像素值如果线段的宽度是奇数像素绘制时以n.5即半数像素作为中轴线如果线段的宽度为偶数像素绘制时以n.0即整数像素作为中轴线 参考博客 https://www.cnblogs.com/v-rockyli/p/3833845.html 转载于:https://www.cnblogs.com/liulei-cherry/p/9915182.html
