2

HTML5 Canvas と JavaScript を使用して画像上にオブジェクトを描画する方法を誰かが理解するのを手伝ってくれるかどうか疑問に思っていますか?

以下に私の問題を示す例を書きました (choc.jpg という画像が利用可能である限り、動作するはずです)。バナナ オブジェクトを JPEG の上に表示したいのですが、そうではありません。私は HTML5 とキャンバスの初心者であり、正しい方向性を示していただければ幸いです。助けてくれてどうもありがとう！

<!DOCTYPE HTML>
<script>

window.onload=function() {
var testcanvas=document.getElementById("bananaDesign");
var testcontext=testcanvas.getContext('2d');

//set a background image
/* if I comment out this section no image appears and the banana gets drawn. How do I get banana to go over image? */

var importedImg = new Image();
importedImg.src = 'pictures/choc.JPG';
importedImg.onload = function(){
testcontext.drawImage(importedImg, 10, 10);
};


//draw a banana
testcontext.fillStyle = "#FFA824";
testcontext.beginPath();
testcontext.moveTo(62,20);
testcontext.lineTo(80,20); //2
testcontext.lineTo(80,30); //3
testcontext.lineTo(90,50); //4
testcontext.lineTo(80,85); //5
testcontext.lineTo(45,95); //6
testcontext.lineTo(40,80); //7
testcontext.lineTo(60,60); //8
testcontext.lineTo(60,30); //9
testcontext.fill();
}

</script>


<canvas id="bananaDesign" width="500" height="600" style="border: 5px red solid">
<p>Your browser does not display HTML5 canvas. Please update to view this design.</p>
</canvas>
4

2 に答える 2

1

画像は非同期で読み込まれるため、バナナを描画した後 (したがってその上に描画した後) に実際にキャンバスに描画されます。簡単な修正は、画像をキャンバスに描画した後、バナナの描画コードを画像読み込みハンドラーに移動することです ( http://jsfiddle.net/5pGqV/を参照してください。振り返ってみると、選択した背景画像は理想的ではありませんでした;)):

<!DOCTYPE HTML>
<script>

    window.onload=function() {
        var testcanvas=document.getElementById("bananaDesign");
        var testcontext=testcanvas.getContext('2d');

        //set a background image
        /* if I comment out this section no image appears and the banana gets drawn. How do I get banana to go over image? */

        var importedImg = new Image();
        importedImg.src = 'pictures/choc.JPG';
        importedImg.onload = function(){

            //draw the loaded image to canvas first
            testcontext.drawImage(importedImg, 10, 10);

            //now draw a banana on top
            testcontext.fillStyle = "#FFA824";
            testcontext.beginPath();
            testcontext.moveTo(62,20);
            testcontext.lineTo(80,20); //2
            testcontext.lineTo(80,30); //3
            testcontext.lineTo(90,50); //4
            testcontext.lineTo(80,85); //5
            testcontext.lineTo(45,95); //6
            testcontext.lineTo(40,80); //7
            testcontext.lineTo(60,60); //8
            testcontext.lineTo(60,30); //9
            testcontext.fill();
        }; 
    }

</script>


<canvas id="bananaDesign" width="500" height="600" style="border: 5px red solid">
<p>Your browser does not display HTML5 canvas. Please update to view this design.</p>
</canvas>
于 2012-10-18T08:41:00.547 に答える
1

コンテキストでglobalCompositeOperation属性を構成する必要があります。あなたの場合、値を'destination-over'に設定して、画像の上に描画します。これは、すべての可能な値のリストですhttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-globalcompositeoperation .

コードの例http://jsfiddle.net/gU4xc/

于 2012-10-18T08:44:29.863 に答える