HTML5画布 - 如何绘制在图像背景的线路？ [英] HTML5 Canvas - How to Draw a line over an image background?

问题描述

我想画上的图像的背景上线 - 在HTML5画布。
但是总是被线绘制的形象背后。其实行被抽中，然后将照片拿得出 - 不管我怎么调用的函数。

我如何把线到图像的顶部？

  VAR帆布=的document.getElementById（myCanvas）;
        VAR上下文= canvas.getContext（2D）;
            context.clearRect（0，0，canvas.width，canvas.height）;
drawbackground（画布，背景）;
drawlines（画布，背景）;
功能drawbackground（帆布，上下文）{    VAR imagePaper =新的图像（）;
        imagePaper.onload =功能（）{
            context.drawImage（imagePaper，100，20，500,500）;
        };      imagePaper.src =图像/ main_timerand3papers.png
}功能drawlines（帆布，上下文）{
            context.beginPath（）;
            context.moveTo（188，130）;
            context.bezierCurveTo（140，10，388，10，388，170）;
            context.lineWidth = 10;
            //线条颜色
            context.strokeStyle =黑色;
            context.stroke（）;
}
 

解决方案

完全未经测试code，但你尝试过这样的事情？

 函数drawbackground（画布，背景，onload事件）{    VAR imagePaper =新的图像（）;
        imagePaper.onload =功能（）{
            context.drawImage（imagePaper，100，20，500,500）;
            onload事件（画布，背景）;
        };      imagePaper.src =图像/ main_timerand3papers.png
}
 

，然后调用该方法是这样...

  drawbackground（画布，背景，drawlines）;
 

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画布 - 如何绘制在图像背景的线路？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！