web-dev-qa-db-fra.com

Comment puis-je prendre le code de Codepen et l'utiliser localement?

Comment puis-je prendre le code de codepen et l'utiliser localement dans mon éditeur de texte?

http://codepen.io/mfields/pen/BhILt

J'essaie de créer une pièce avec cette création localement, mais lorsque je l'ouvre en chrome, j'obtiens une page blanche vierge avec rien ne se passe.

<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css"  src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>

J'ai copié, collé et enregistré les fichiers css et js dans différents fichiers et les ai enregistrés, puis essayé de les lier dans le fichier html comme indiqué ci-dessus.

J'ai également inclus la bibliothèque jQuery car je comprends que de nombreuses créations de codepen l'utilisent.

La seule erreur de console que je reçois est 

Uncaught TypeError: Cannot read property 'getContext' of null

qui relie à mon fichier js, ligne 4

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

Désolé si c'est idiot, mais je suis novice dans tout ça ... Je suis sûr que c'est aussi fondamental que l'enfer. Toute aide serait géniale!

javascriptcsshtml5html5-canvas
9
Sam Mcleod

Joe Fitter a raison, mais j'estime préférable de exporter votre stylo (utilisez l'option export to export.Zip pour utiliser votre stylo localement). Cela vous donnera une version de travail de votre stylo sans avoir à copier et coller les codes CSS, JavaScript et HTML et sans avoir à y apporter des modifications pour que cela fonctionne correctement.

9
Álvaro Arranz

Il semble que votre javascript soit en cours d'exécution avant le chargement du code HTML. Si vous pouvez utiliser jQuery, mettez le js à l'intérieur de ceci;

    $( document ).ready(function() {
      // js goes in here.
    });

soit tu peux essayer ça ....

    function init() {
     // Run your javascript code here
  }
document.addEventListener("DOMContentLoaded", init, false);
4
Shariq Ansari

on dirait que vous appelez le JS avant que le DOM ne soit chargé.

essayez de l'envelopper dans un 

$(function() {
    // your code here
});

qui est le même que 

$(document).ready(function() {
    // your code here
});

si vous utilisez jQuery.

ou vous pouvez inclure la balise <script> après le contenu, juste avant la balise body de fermeture, cela garantira que le contenu a été rendu avant l'exécution du JS

Ou vous pouvez nommer la fonction dans votre JS et l'exécuter en chargement du corps:

<body onLoad="yourFunction();">
2
Joe Fitter

Cliquez avec le bouton droit sur le cadre result et choisissez View Frame source. Et vous pouvez copier le code source et le coller dans votre propre éditeur de texte.

 enter image description here

1
thangdc94

Pour télécharger le code HTML calculé d'un codepen, allez au codepen de votre choix, Puis cliquez sur le bouton "Changer de vue" et passez au mode "pleine page".

Cela dépend maintenant de votre navigateur.

Firefox

affichez le code source (Cmd + u) et allez tout en bas . Cherchez le dernier iframe et cliquez sur la valeur de l'attribut src . Voilà.

Chrome

Cliquez avec le bouton droit de la souris sur la page (pas sur l'en-tête de code) et choisissez l'option Afficher la source FRAME (et non la source PAGE) .

0
ling