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?

J'essaie d'avoir une pièce avec cette création localement, mais quand je l'ouvre en chrome, j'obtiens une page vierge blanche sans rien faire.

<!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é le css et js dans différents fichiers et les ai sauvegardés, puis essayé de les lier dans le fichier html comme je l'ai montré ci-dessus.

J'ai également inclus la bibliothèque jquery car je comprends bien que beaucoup des créations 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 cela est stupide, mais je suis nouveau sur tout cela. Je suis sûr que cela est fondamental comme l'enfer. Toute aide serait incroyable!

Joe Fitter a raison, mais je pense qu'il vaut mieux exporter votre stylo (utilisez l'option export vers export.zip pour utiliser votre stylet localement). Cela vous donnera une version fonctionnelle de votre stylo sans avoir à copier et coller le code CSS, JavaScript et HTML et sans avoir à apporter des modifications pour le faire fonctionner.

Il semble que votre javascript fonctionne avant que le HTML ne soit terminé. Si vous pouvez utiliser jQuery, placez les js à l'intérieur de ceci;

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

Soit vous pouvez essayer ceci …

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

Il semble que vous appelez le JS avant que le DOM ne soit chargé.

Essayez de l'enrouler 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 <script> après le contenu, juste avant la balise du corps 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 sur le chargement du corps:

 <body onLoad="yourFunction();">

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

Entrez la description de l'image ici

Pour télécharger le html calculé d'un codepen, accédez au code-code de votre choix, puis cliquez sur le bouton "Modifier la vue" et accédez au mode "page complète".

Maintenant dépend de votre navigateur.

Firefox

Affiche le code source (Cmd + u) et allez en bas. Recherchez 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 l'en-tête Codepen) et choisissez l'option Afficher la source FRAME (pas la source PAGE). Voilà.