HTML5 Canvas - 如何在图像背景上画一条线？

Posted 2023-03-05

【中文标题】HTML5 Canvas - 如何在图像背景上画一条线？

【英文标题】：HTML5 Canvas - How to Draw a line over an image background?

【发布时间】：2012-05-24 07:39:26

【问题描述】：

我正在尝试在图像背景上画一条线 - 在 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();

【参考方案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);

【讨论】：

最后一行是否应该是drawlines(canvas, context, drawlines(canvas,context)); ?

不，因为在这种情况下，您将调用方法“drawlines”，然后使用其返回值作为参数。

【参考方案2】：

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

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

【讨论】：

谢谢西蒙。但我还需要对背景进行一些动态更改。因此我没有使用 CSS 属性。

【参考方案3】：

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

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

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

此解决方案的重要内容是 onload 函数将在未来某个时间执行，而 drawLines 函数将立即执行。您必须始终小心构建回调的方式，尤其是在嵌套它们时。

【讨论】：

这个答案值得更多的支持，因为它有解释

【参考方案4】：

或者你可以试试这个：

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