【发布时间】：2014-09-30 02:45:42
【问题描述】：
Codecademy 网站有一个课程，用户可以learn to create an animated name on a canvas element using JavaScript。几个月来，我一直在尝试重新创建结果，但我所尝试的一切都没有让我接近我正在寻找的东西。
以下是课程中使用的 HTML 和 JavaScript（链接：http://www.codecademy.com/goals/animate-your-name）。虽然仅在 Codecademy 网站上有效。
JavaScript：
注意 1：这个版本的 JS 是在原版的基础上略微修改的。
注意 2：此 JavaScript 的文件名是 main.js。
var red = [359, 100, 29.8];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var bluefield = [199, 100, 22.9];
var myName = "Bluefield";
var letterColors = [bluefield,red];
var bubbleShape = "square";
drawName(myName, letterColors);
bounceName();
bounceBubbles();
HTML（完整）：
注意：直到今天（2014 年 8 月 6 日）我才看到这个 HTML。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
以下来自最近使用类似代码的 JSFiddle（此处链接：http://jsfiddle.net/mnbishop017/cd7djy02/）。这行不通。
JavaScript
var red = [359, 100, 29.8];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var bluefield = [199, 100, 22.9];
var myName = "Bluefield";
var letterColors = [bluefield,red];
var bubbleShape = "square";
drawName(myName, letterColors);
bounceName();
bounceBubbles();
HTML（在'body'标签内）：
<canvas id="myCanvas"></canvas>
链接的外部资源（重要！）：
【问题讨论】：
-
在浏览器中打开 JavaScript 控制台。你会看到一个错误。您缺少功能。
-
此代码需要更多的 javascript 库。查看他们使用alphabet.js、bubbles.js和jquery的页面你只包括alphabet
标签： javascript jquery html animation html5-canvas