Dev Faq
7
votes

Comment ajouter une toile HTML5 dans un div

J'utilise le code ci-dessous pour générer un Toile code>. Pour le moment, il ajoute l'élément de toile au corps code> code>, comment puis-je l'ajouter à un div code> nommé "Divgamestage", qui n'est pas imbriqué dans aucun autre élément , sauf corps code>.

Edit: J'ai essayé la première suggestion, mais aucune toile n'apparaît, le code complet est la suivante: p> 

<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
    function loadCanvas(id) {
        var canvas = document.createElement('canvas');
        div = document.getElementByID(id); 
        canvas.id     = "CursorLayer";
        canvas.width  = 1224;
        canvas.height = 768;
        canvas.style.zIndex   = 8;
        canvas.style.position = "absolute";
        canvas.style.border   = "1px solid";
        div.appendChild(canvas)
    }
        </script>
</head>
<body>
<header>
    <h1>The most important heading on this page</h1>
    <p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
    loadCanvas(divGameStage);
</script>
</body>
</html>

1 commentaires

Dupliqué possible de Ajouter une toile à une page avec JavaScript

4 Réponses :

4
votes

Vous devez juste l'ajouter à votre

au lieu du corps: xxx

tout simplement: -)

2 commentaires

Merci, mais aucune toile n'est apparue, j'ai collé le code mis à jour, dois-je appeler LoadCanvas au mauvais endroit ou est-ce quelque chose d'autre?

Lorsque vous dites n'apparaissant pas, avez-vous vérifié la source? Je suis à peu près sûr que la toile ne vous sera pas visible jusqu'à ce que vous sachiez dans ce cas.

3
votes 
<script type="text/javascript">
    function loadCanvas() {
        var canvas = document.createElement('canvas');
        canvas.id     = "canvGameStage";
        canvas.width  = 1000;
        canvas.height = 768;
        canvas.style.zIndex   = 8;
        canvas.style.position = "absolute";
        canvas.style.border   = "1px solid";
        var div = document.createElement("div");
        div.className = "divGameStage";
        div.appendChild(canvas);
        document.body.appendChild(div)
    }
</script>
0 commentaires
1
votes

Le seul problème ici est celui-ci: 

loadCanvas("divGameStage");

0 commentaires
17
votes

Essayez simplement ce code et fonctionnera sûrement pour vous: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
    function loadCanvas(id) {
        var canvas = document.createElement('canvas');
        div = document.getElementById(id); 
        canvas.id     = "CursorLayer";
        canvas.width  = 1224;
        canvas.height = 768;
        canvas.style.zIndex   = 8;
        canvas.style.position = "absolute";
        canvas.style.border   = "1px solid";
        div.appendChild(canvas)
    }
</script>
</head>
<body>
<header>
    <h1>The most important heading on this page</h1>
    <p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
    loadCanvas("divGameStage");
</script>
</body>
</html>
  • erreur n ° 1 est manquante citations dans LoadCanvas ("Divgamestage"); Li>
  • Erreur n ° 2 est une erreur de syntaxe Div = Document.getElementyID (ID); "..Id (id)" était dans votre code. LI> ul>

    Si alors cela ne fonctionne pas, je suis sûr que vous le testez sur Internet Explorer (spécialement
    Si tel est le cas, FYI IE9 et ci-dessus prend en charge la toile Aucune autre version inférieure prend en charge la toile P>

    acclamations !!! P> P>

1 commentaires

Merci pour les conseils, je ne faisais évidemment pas attention à mes citations et au cas.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO