如何從Codepen獲取代碼並在本地使用它？
[英]How do I take code from Codepen, and use it locally?
問題描述
如何從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' ),
對不起，如果這是愚蠢的，但我對這一切都是新手。 我確信這是基本的地獄。 任何幫助都是極好的！
5 個解決方案
解決方案1
10 已采納 2015-04-26 11:29:17
Joe Fitter是對的，但我認為最好導出你的筆 （使用export to export.zip選項在本地使用你的筆）。 這將為您提供筆的工作版本，而無需復制和粘貼CSS，JavaScript和HTML代碼，也無需對其進行更改以使其正常工作。
解決方案2
4 2015-04-26 11:23:04
在HTML加載完成之前，您的javascript似乎正在運行。 如果你可以使用jQuery把js放在里面;
$( document ).ready(function() {
// js goes in here.
});
或者你可以嘗試這個....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
解決方案3
2 2015-04-26 11:22:21
看起來你在加載DOM之前調用了JS。
嘗試將其包裹在一個
$(function() {
// your code here
});
這是一樣的
$(document).ready(function() {
// your code here
});
如果你使用jQuery。
或者您可以在內容之后包含<script>標記，就在結束體標記之前，這將確保在執行JS之前呈現內容
或者您可以在JS中命名該函數並在body的onLoad上執行：
<body onLoad="yourFunction();">
解決方案4
1 2016-02-15 06:48:54
右鍵單擊result框架，然后選擇“ View Frame source 。 您可以復制源代碼並將其粘貼到您自己的文本編輯器中。
解決方案5
0 2016-09-28 11:33:08
要下載codepen的計算html，請轉到您選擇的codepen，然后單擊“Change View”按鈕並轉到“整頁”模式。
現在取決於您的瀏覽器。
火狐
顯示源代碼（Cmd + u）並進入最底層。 查找最后一個iframe，然后單擊src屬性的值。 你去吧
鉻
右鍵單擊頁面（而不是codepen標題）並選擇View FRAME source（不是view PAGE source）選項。 你去吧
如何在我的Codepen（Javascript）中使用來自Github要點的代碼？
[英]How can I use code from a Github gist in my Codepen (Javascript)?
我的代碼在本地和Codepen或plunker中執行的方式不同
[英]My code is not executed the same locally and in codepen or plunker
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.