JavaScript:如何重新创建"动画你的名字"Codecademy的教训

JavaScript: How to recreate "Animate Your Name" lesson from Codecademy?

本文关键字：quot Codecademy 你的名字 动画 创建 JavaScript 何重新      更新时间：2023-09-26

Codecademy网站上有一节课，用户可以学习使用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>

外部资源链接(重要!):

  • http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js(来自原始课程的HTML)

我设法让它在这里工作: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>

尝试在蓝色和红色之间留出空间:var letterColors = [blue, red];

对我来说这是唯一的问题。

相关文章：