Geek asks and answers

Line drawing in canvas but last faded

I am trying to draw a grid of white lines on a black background.

The bottom 3 horizontal lines seem pale until I overlap them, and I cannot understand why this is happening. Has anyone seen this before and / or knew what I'm doing wrong?

+3
source share
3 answers

This is due to the fact that lines are drawn above all the pixels over which they ended (positioning on the canvas is in the float). If you want to draw exact vertical or horizontal lines in javascript on canvas, you better have them one and a half times.

. : y- 1. . y- 4,5. .

enter image description here

, , :

                // Horizontal lines
                for (var i = 1; i < objCanvas.height / intGridWidth; i++)
                {
                    objContext.strokeStyle = "white";
                    var y = Math.floor(i*intGridWidth)+0.5
                    objContext.moveTo(0, y);
                    objContext.lineTo(objCanvas.width, y);
                    objContext.stroke();
                }

:

http://jsfiddle.net/dystroy/7NJ6w/

, , , , - . :

function drawThinHorizontalLine(c, x1, x2, y) {
    c.lineWidth = 1;
    var adaptedY = Math.floor(y)+0.5;
    c.beginPath();
    c.moveTo(x1, adaptedY);
    c.lineTo(x2, adaptedY);
    c.stroke();
}

, , .

+9

. , - , . Chrome 20 Win 7. .

0

You should define objContext.lineWidthas follows:

objContext.lineWidth = 2;

I'm not sure why the last line is fading. See http://jsfiddle.net/jSCCY/

0
source

More articles:


All Articles