今天在講Simple Blockly案例的準(zhǔn)備工作時话肖，講到HTML的基礎(chǔ)知識千元，穿插了如何將Pencil Code生成的動畫插入到HTML頁面擂仍。
1. 繪制動畫
首先在Pencil Code中繪制動畫驼壶，在繪制的過程中罚拟，盡量選擇JavaScript代碼進行繪制，方便后續(xù)js代碼的導(dǎo)入驱敲。
2. js代碼保存
完成繪制之后铁蹈，點擊中間“click for text”按鈕，將塊代碼轉(zhuǎn)換為文本代碼：
speed(100);
for(var i=0;i<8;i++){
pen(random(color),2);
for(var j=0;j<50;j++){
rt(30,j);
}
}
復(fù)制文本代碼众眨，將其插入到html文件中握牧。
<!doctype html>
<html>
<body>
<script type="text/javascript">
speed(100);
for(var i=0;i<8;i++){
pen(random(color),2);
for(var j=0;j<50;j++){
rt(30,j);
}
}
</script>
</body>
</html>
到這里之后，如果用瀏覽器打開娩梨，會發(fā)現(xiàn)報錯沿腰，提示“Uncaught ReferenceError: speed is not defined”：
這是因為pencil code的js代碼繪制動畫，還需要依賴pencil code的一些文件狈定，所以需要接著進行第三步矫俺。
3. 調(diào)用依賴的js文件
在第2步代碼body前，添加如下代碼：
<head>
<script src="https://pencilcode.net/turtlebits.js" crossorigin="anonymous" type="text/javascript"></script>
</head>
如果pencil code生成的js代碼過長稿湿，可以將其單獨保存為js代碼，然后在html中調(diào)用外部js腳本押赊，可實現(xiàn)相同效果饺藤。
Coffee Script代碼的導(dǎo)入
若生成的是coffeescript代碼，通過內(nèi)部js腳本的方式調(diào)用時流礁，只需要將script標(biāo)簽的type屬性由“text/javascript”修改為“text/coffeescript”即可涕俗。
<!doctype html>
<html>
<head>
<script src="https://pencilcode.net/turtlebits.js" crossorigin="anonymous" type="text/javascript"></script>
</head>
<body>
<script type="text/coffeescript"> //在此處進行修改
speed 200
tree = (size) ->
if size < 5
return
fd size
lt 30
tree(size * 3/4)
rt 60
tree(size * 3/4)
lt 30
bk size
pen green
tree 50
</script>
</body>
</html>
如果將CoffeeScript另存為cs文件進行外部cs腳本調(diào)用，會存在一些問題神帅，較為復(fù)雜再姑，這里就不做示范和講解。
