Question

我试图在图像背景上绘制一条线 - 在HTML5 Canvas中。但是，总是在图像后面绘制线条。实际上，首先绘制线条，然后绘制图片 - 无论我如何调用函数。

如何将线条置于图像顶部？

var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
drawbackground(canvas, context); 
drawlines(canvas, context); 


function drawbackground(canvas, context){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}



function drawlines(canvas, context){


            context.beginPath();
            context.moveTo(188, 130);
            context.bezierCurveTo(140, 10, 388, 10, 388, 170);
            context.lineWidth = 10;
            // line color
            context.strokeStyle = "black";
            context.stroke();
}

Answer 1

完全未经测试的代码，但您尝试过类似的内容吗？

function drawbackground(canvas, context, onload){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
            onload(canvas, context);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}

然后调用这样的方法......

 drawbackground(canvas, context, drawlines);

Answer 2

为了提高效率，假设您要对此行或多行进行多次重绘，则将画布的CSS background-image设置为您的图像。

<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas>

Answer 3

将您的图片onload更改为以下内容：

imagePaper.onload = function () {
    context.drawImage( imagePaper, 100, 20, 500, 500 );
    drawLines( canvas, context );
};

然后确保删除之前对drawLines的调用。

这个解决方案的重要之处在于，onload函数将在以后的某个时间执行，而drawLines函数会立即执行。您必须始终小心如何构建回调，尤其是在嵌套回调时。

Answer 4

或者你可以试试这个：

drawbackground(canvas, context);
context.globalCompositeOperation = 'destination-atop';
drawlines(canvas, context);

HTML5画布 - 如何在图像背景上画线？

4 个答案: