Codecademy网站上有一个课程，用户可以learn to create an animated name on a canvas element using JavaScript。我已经尝试重建几个月的结果了，但是我尝试过的任何东西都让我无法接近我正在寻找的东西。
以下是本课程中使用的HTML和JavaScript（此处链接：http://www.codecademy.com/goals/animate-your-name）。这可以在Codecademy网站上使用 。
注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();
注意：直到今天（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/）。 无法正常工作。
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();
<canvas id="myCanvas"></canvas>
答案 0 :(得分：2)
我设法让它在这里工作：http://jsfiddle.net/rmadhuram/he1pqyzz/1/
诀窍是添加jQuery，然后将外部库添加到HTML的<body>中，如下所示：
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
答案 1 :(得分：1)
尝试在蓝色和红色之间放置空格：var letterColors = [blue, red];
对我而言，这是唯一的问题。