如何从 Codepen 获取代码并在本地使用？

Question

如何从 codepen 获取代码，并在本地文本编辑器中使用它？

我想在本地玩这个创作，但是当我在 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 复制、粘贴并保存到不同的文件中并保存，然后尝试将它们 link 放入 html 文件中，如上所示。

我还包含了 jquery 库，因为我知道很多 codepen 创作都使用它。

我遇到的唯一控制台错误是

Uncaught TypeError: Cannot read property 'getContext' of null

这是 link我的 js 文件第 4 行

(function(){

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

对不起，如果这很愚蠢，但我是新手。我敢肯定这是最基本的。任何帮助都会很棒！

Answer 1

看起来您是在 DOM 加载之前调用 JS。

尝试将其包装在

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

与

相同

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

如果您正在使用 jQuery。

或者您可以在内容之后包含 <script> 标签，就在结束 body 标签之前，这将确保内容在 JS 执行之前已经呈现

或者你可以在你的 JS 中命名该函数并在 body 的加载上执行它：

<body onLoad="yourFunction();">

Answer 2

您的 javascript 似乎是运行 HTML 完成加载之前。如果你可以使用 jQuery 把 js 放在里面;

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

你可以试试这个....

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

Answer 3

Joe Fitter 是对的，但我认为 export your pen 更好（使用导出到 export.zip 选项在本地使用您的笔）。这将为您提供笔的工作版本，而无需复制和粘贴 CSS、JavaScript 和 HTML 代码，也无需对其进行更改以使其工作。

Answer 4

右键单击 result 框架并选择 View Frame source。您可以复制源代码并将其粘贴到您自己的文本编辑器中。

Answer 5

要下载代码笔的计算 html，请转到您选择的代码笔，然后单击 "Change View" 按钮并进入 "full page" 模式。

现在取决于您的浏览器。

火狐

显示源代码 (Cmd+u) 并转到最底部。查找最后一个 iframe 并单击 src 属性的值。给你。

Chrome

在页面（不是codepen header）中右击并选择View FRAME source（不是view PAGE source）选项。给你。

如何从 Codepen 获取代码并在本地使用？

How do I take code from Codepen, and use it locally?

html

javascript

css

html5-canvas

火狐

Chrome