HTML5 Canvas - 如何在图像背景上画一条线? [英] HTML5 Canvas - How to Draw a line over an image background?

查看:43
本文介绍了HTML5 Canvas - 如何在图像背景上画一条线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在图像背景之上绘制一条线 - 在 HTML5 Canvas 中.然而,线条总是在图像后面绘制.实际上,首先绘制线条,然后绘制图片 - 无论我如何调用函数.

I am trying to draw a line on top of an image background - in an HTML5 Canvas . However always the line gets drawn behind the image . Actually the line gets drawn first and then the pictures get drawn - irrespective of how I call the functions.

如何将线条带到图像的顶部?

How do I bring the line to the top of the image ?

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();
}

推荐答案

完全未经测试的代码,但您是否尝试过这样的事情?

Totally untested code, but did you tried something like this?

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";
}

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

and then call the method like this...

 drawbackground(canvas, context, drawlines);

这篇关于HTML5 Canvas - 如何在图像背景上画一条线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆