HTML5 Canvas zeigt img nicht an

Allgemeine Themen rund um NetBeans

Moderator: wegus

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

HTML5 Canvas zeigt img nicht an

Beitragvon znieh99 » 16.01.2015, 17:41

Hallo Forum,
ich mache erste Versuche mit HTML5 und möchte in einer canvas ein Image anzeigen. Der Bereich bleibt aber leer. Warum?
lg heinz
Hier der Code:

Code: Alles auswählen

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Steinanordnung testen</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
     </head>
    <body>
        <canvas id="canv1" width="400" height="400">
            <img src="picture/rp_stein_01.gif" alt="stein" height="69" width="61">
        </canvas>
    </body>
</html>

znieh99
Beiträge: 28
Registriert: 28.03.2014, 17:12

Re: HTML5 Canvas zeigt img nicht an

Beitragvon znieh99 » 16.01.2015, 21:46

Ich habe das Problem gelöst:
Den Inhalt eines canvas-Objekt kann man nur von außen ansprechen. Im folgenden Code wird mit JavaScript das Image geladen. Wenn das Laden beendet ist (load function) kann es der canvas zugeordnet und angezeigt werden.
lg heinz

Code: Alles auswählen

<html>
    <head>
        <title>Steinanordnung testen</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
     </head>
    <body>
        <canvas id="canv1" width="400" height="400">
        </canvas>
        <script>
             var img = new Image();   // Create new img element
            img.addEventListener("load", function() {
                var can = document.getElementById('canv1');  // Ziel (canvas) definieren
                can = can.getContext('2d');
                can.drawImage(img, 10, 10)  // Image in canvas ausgeben
                 }, false);
            img.src = 'picture/rp_stein_01.gif'; // Image laden
        </script>
    </body>
</html>


Zurück zu „NetBeans - Allgemeines“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste