当前位置: 动力学知识库 > 问答 > 编程问答 >

Draw single pixel line in html5 canvas

问题描述:

When i try to draw single pixel black line with the following code:

 context.strokeStyle = '#000';

context.beginPath();

context.moveTo(x1, y1);

context.lineTo(x2, y2);

context.lineWidth = 1;

context.stroke();

context.closePath();

I have more then one pixel line with gray border. How to fix it?

Here is an example http://jsfiddle.net/z4VJq/

网友答案:

Call your function with these coordinates instead: drawLine(30,30.5,300,30.5);. Try it in jsFiddle.

The problem is that your color will be at an edge, so the color will be halfway in the pixel above the edge and halfway below the edge. If you set the position of the line in the middle of an integer, it will be drawn within a pixel line.

This picture (from the linked article below) illustrates it:

You can read more about this on Canvas tutorial: A lineWidth example.

分享给朋友:
您可能感兴趣的文章:
随机阅读: