web-dev-qa-db-ja.com

Codepenからコードを取得してローカルで使用するにはどうすればよいですか？

コードペンからコードを取得し、テキストエディターでローカルに使用するにはどうすればよいですか？

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

この作品をローカルでプレイしようとしていますが、Chromeで開くと、何も起こらない空白の白いページが表示されます。

<!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>

私はcssとjsをコピーして別のファイルに貼り付けて保存し、それらを保存してから、上記のようにそれらをhtmlファイルにリンクしようとしました。

多くのcodepen作成物がjqueryライブラリーを使用していることを理解しているので、jqueryライブラリーも含めました。

私が得る唯一のコンソールエラーは

Uncaught TypeError: Cannot read property 'getContext' of null

これは私のjsファイルにリンクしています、4行目

(function(){

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

これがばかげている場合は申し訳ありませんが、私はこれすべてに新しいです。これは地獄のように基本的であると確信しています。どんな助けでも素晴らしいです！

javascriptcsshtmlhtml5-canvas
12
Sam Mcleod

ジョー・フィッターは正しいですが、私は ペンをエクスポートする （ペンをローカルで使用するためにエクスポートtoエクスポート。これにより、CSS、JavaScript、HTMLコードをコピーして貼り付ける必要がなく、ペンを機能させるために変更を加える必要なく、ペンの作業バージョンが得られます。

10
Álvaro Arranz

HTMLの読み込みが完了する前にJavaScriptが実行されているようです。 jQueryを使用できる場合は、この中にjsを配置します。

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

あなたはこれを試すことができます...

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

dOMがロードされる前にJSを呼び出しているように見えます。

に包んでみてください

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

それは同じです

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

jQueryを使用している場合。

または、<script>タグは、コンテンツの後、本文の終了タグの直前にあります。これにより、JSが実行される前にコンテンツがレンダリングされます。

または、JSで関数に名前を付けて、本体のonLoadで実行することもできます。

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

resultフレームを右クリックし、View Frame sourceを選択します。また、ソースコードをコピーして、独自のテキストエディターに貼り付けることができます。

enter image description here

1
thangdc94

コードペンの計算されたhtmlをダウンロードするには、選択したコードペンに移動し、[ビューの変更]ボタンをクリックして、[ページ全体]モードに移動します。

今あなたのブラウザーに依存します。

Firefox

ソースコード（Cmd + u）を表示し、一番下に移動します。最後のiframeを探して、src属性の値をクリックします。どうぞ。

Chrome

（コードペンヘッダーではなく）ページを右クリックし、[フレームソースの表示（ページソースの表示ではない）]オプションを選択します。どうぞ。

1
ling