如何从 Codepen 获取代码并在本地使用? [英] How do I take code from Codepen, and use it locally?

查看:51
本文介绍了如何从 Codepen 获取代码并在本地使用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何从 codepen 获取代码,并在我的文本编辑器中本地使用它?

How do I take the code from codepen, and use it locally in my text-editor?

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

我正在尝试在本地玩这个创作,但是当我在 chrome 中打开它时,我得到一个空白页面,没有任何内容.

I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.

<!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 文件中,如上所示.

I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.

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

I have also included the jquery library as I understand a lot of the codepen creations use it.

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

The only console error I'm getting is

Uncaught TypeError: Cannot read property 'getContext' of null

链接到我的 js 文件第 4 行

which is linking to my js file, line 4

(function(){

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

对不起,如果这很愚蠢,但我对这一切都很陌生.我敢肯定这是基本的地狱.任何帮助都会很棒!

Sorry if this is dumb, but I'm new to all this. I'm sure this is basic as hell. Any help would be awesome!

推荐答案

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

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

这篇关于如何从 Codepen 获取代码并在本地使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆