javascript - 如何从 Codepen 获取代码并在本地使用?

标签 javascript css html html5-canvas

如何从 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 文件中,如上所示。

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

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

Uncaught TypeError: Cannot read property 'getContext' of null

链接到我的 js 文件,第 4 行

(function(){

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

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

最佳答案

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

关于javascript - 如何从 Codepen 获取代码并在本地使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29876904/

相关文章:

Jquery,获取#000000 格式的.css "background-color"?

HTML/CSS Facebook 链接

javascript - 连续 Bootstrap 七列

JavaScript:如何从字符串中删除任何包含(或直接位于其前面)大写字母、数字或逗号的单词?

css - 将 ValidationSummary MVC3 显示为 "alert-error"Bootstrap

html - CSS 背景图片未出现在网站上

javascript - 如何修复在某些浏览器上停止工作的背景视频

javascript - 如何对对象数组中的某些值进行舍入?

javascript - 有没有办法将JS数组转换为JSON或Android中的数组?

javascript - 我的休假申请表中的回形针选项用于附加文件