codepen怎么保存,如何从Codepen获取代码-深圳网商在线网站建设公司

您的位置：首页 > 新闻

codepen怎么保存,如何从Codepen获取代码

新闻 2023-03-17编辑：深圳网站建设阅读（）标签： 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是正确的，但我认为最好导出您的笔（使用导出导出.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.