今天在讲Simple Blockly案例的准备工作时，讲到HTML的基础知识，穿插了如何将Pencil Code生成的动画插入到HTML页面。
1. 绘制动画
首先在Pencil Code中绘制动画，在绘制的过程中，尽量选择JavaScript代码进行绘制，方便后续js代码的导入。
2. js代码保存
完成绘制之后，点击中间“click for text”按钮，将块代码转换为文本代码：
speed(100);
for(var i=0;i<8;i++){
pen(random(color),2);
for(var j=0;j<50;j++){
rt(30,j);
}
}
复制文本代码，将其插入到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>
到这里之后，如果用浏览器打开，会发现报错，提示“Uncaught ReferenceError: speed is not defined”：
这是因为pencil code的js代码绘制动画，还需要依赖pencil code的一些文件，所以需要接着进行第三步。
3. 调用依赖的js文件
在第2步代码body前，添加如下代码：
<head>
<script src="https://pencilcode.net/turtlebits.js" crossorigin="anonymous" type="text/javascript"></script>
</head>
如果pencil code生成的js代码过长，可以将其单独保存为js代码，然后在html中调用外部js脚本，可实现相同效果。
Coffee Script代码的导入
若生成的是coffeescript代码，通过内部js脚本的方式调用时，只需要将script标签的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脚本调用，会存在一些问题，较为复杂，这里就不做示范和讲解。
网友评论