Laden eines Bildes auf eine Leinwand mit JavaScript

Question

Feb 07, 2013, 06:51 PM

Laden eines Bildes auf eine Leinwand mit JavaScript

Hallo allerseits, ich teste derzeit mit dem Canvas-Element, um alle Hintergründe zu zeichnen (ich füge später Effekte zu diesen Bildern hinzu, und das ist der Grund, warum ich kein CSS zum Laden der Bilder verwende) auf die Leinwand. Hier ist der Code:

<html>

<head>

    <title>Canvas image testing</title>

    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {

                var ctx = canvas.getContext('2d');

                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';

                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);

                };
            }

        }


    </script>

    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>

<body onload="Test1();">

    <canvas id="canvas" width="1280" height="720"></canvas>


</body>

Ich glaube, ich lade das Bild nicht richtig, bin mir aber nicht sicher.