web-dev-qa-db-ja.com

HTML5キャンバス-画像の背景の上に線を引く方法は？

HTML5キャンバスで画像の背景の上に線を引こうとしています。ただし、常に線が画像の後ろに描画されます。実際には、関数の呼び出し方法に関係なく、最初に線が描画され、次に画像が描画されます。

画像の一番上に線を引くにはどうすればよいですか？

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();
}
javascripthtmlanimationcanvashtml5-canvas
14
geeky_monster

まったくテストされていないコードですが、このようなことを試しましたか？

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);
16
Chango

より効率的にするには、この1つまたは複数の行を複数回再描画する場合、キャンバスのCSS background-imageを画像に設定します。

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

画像のオンロードを次のように変更します。

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

次に、drawLinesへの以前の呼び出しを必ず削除してください。

このソリューションの重要なポイントは、onload関数が将来実行されるのに対し、drawLines関数はすぐに実行されることです。特にネストする場合は、コールバックの構造に常に注意する必要があります。

5
Sam

または、これを試すことができます：

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