Question

以下是Code Academy的代码：http://www.codecademy.com/courses/web-beginner-en-girf5/0/1以获取动画名称。动画字符串靠近顶部。有没有什么方法可以重新定位，以便动画将在屏幕的中心？这里是代码： main.js：

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var myName = "Codecademy";
var letterColors = [red, orange, green, blue, purple];

if(10 < 3) {
    bubbleShape = "square";
}
else {
    bubbleShape = "circle";
}

drawName(myName, letterColors);
bounceBubbles();

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>

Answer 1

我建议运行codecademy链接到的bubbles.js脚本：

http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js

然后在本地为您的网站复制它们，并根据需要更改它们......

查看/编辑此部分（在drawName或“output”函数中）：

for (var j=0; j<g.length; j++) {
    g[j].curPos.x = (canvasWidth/2 - offset/2) + g[j].curPos.x;
    g[j].curPos.y = (canvasHeight/2 - 180) + g[j].curPos.y;
    g[j].originalPos.x = (canvasWidth/2 - offset/2) + g[j].originalPos.x;
    g[j].originalPos.y = (canvasHeight/2 - 180) + g[j].originalPos.y;
}

我建议尝试更改此行(canvasHeight/2 - 180)中的公式以更改输出位置......我只是猜测，但这就是我在此代码中跳出来的。

在javascript中更改动画字符串的位置

1 个答案: