Question

我在<canvas>上绘制了一个问题，其中我的代码片段在画布上绘制音乐谱表，无论使用何种浏览器，总是使最后一行画得更轻，几乎消失。

window.onload = draw;

function draw() {
    var canvas = document.getElementById('sheetmusic');
    var c = canvas.getContext('2d');
    var whitespace = 0; // pixel space between staves
    var ycoordinate = 10; // y-plot of beginning of each staff

    //draw the staves 'x' number of times requested
    for (var x = 1; x <= 10; x++) {

        // draw the staff
        for (var i = 1; i <= 5; i++){
            c.strokeStyle = 'black';
            c.moveTo(0,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 10;
        }

        //draw white space beneath each staff
        c.fillStyle = 'white';
        c.fillRect(0,whitespace + 52,canvas.width,45);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 50;

    }
}

我所拥有的解决方案，因为我使用循环绘制线条是重绘每一行，实际上我真正需要的是再次绘制最后一行。

    window.onload = draw;

    function draw() {
        var canvas = document.getElementById('sheetmusic');
        var c = canvas.getContext('2d');
        var whitespace = 0; // pixel space between staves
        var ycoordinate = 10; // y-plot of beginning of each staff

    //draw the staves 'x' number of times requested
    for (var x = 1; x <= 10; x++) {

        // draw the staff
        for (var i = 1; i <= 5; i++){
            c.strokeStyle = 'black';
            c.moveTo(0,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            // this code repeats to alleviate bug with last drawn line not being defined enough
            c.moveTo(0,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 10;
        }

        //draw white space beneath each staff
        c.fillStyle = 'white';
        c.fillRect(0,whitespace + 52,canvas.width,45);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 50;

    }
}

有关如何再次重绘最后一行的任何想法？

请注意，在实施此网络应用程序的其余部分时，我需要通过点击选项更改x变量，因此可以根据需要尽量少量或多次使用。[/ p>

Answer 1

你应该在画布中学习lineWidth属性的基础知识..

请参阅this

解决方案：对于偶数笔划宽度，您可以使用整数作为坐标，使用想要使用的奇数笔划宽度.5以获得正确填充像素的清晰线条。

同样见Fiddle ......

不幸的是，没有其他解决办法......请参阅this

javascript中绘制的最后一行与其他行不同

1 个答案: