0

我有一个问题，<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;

    }
}

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

请记住，当实现此 Web 应用程序的其余部分时，我的x变量将需要通过单击选项进行更改，因此让五线谱的数量尽可能少或多。

4

1 回答 1

2

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

看到这个

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

也看到这个小提琴......

不幸的是，没有其他解决方案...参考这个

于 2013-04-30T04:25:10.383 回答