Javascript 更改java脚本中动画字符串的位置_Javascript_Animation

Javascript 更改java脚本中动画字符串的位置

javascript animation

Javascript 更改java脚本中动画字符串的位置,javascript,animation,Javascript,Animation,下面是代码学院的代码：获取动画名称。动画字符串位于靠近顶部的某个位置。是否有任何方法可以将其重新定位，使动画正好位于屏幕中心？以下是代码： 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 letter

下面是代码学院的代码：获取动画名称。动画字符串位于靠近顶部的某个位置。是否有任何方法可以将其重新定位，使动画正好位于屏幕中心？以下是代码： 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();

var red=[010063]；
var orange=[40100,60]；
绿色变量=[7510040]；
var blue=[196,77,55]；
紫色变量=[280,50,60]；
var myName=“Codecademy”；
var letterColors=[红色、橙色、绿色、蓝色、紫色]；
如果（10<3）{
泡泡形状=“正方形”；
}
否则{
bubbleShape=“圆圈”；
}
drawName（我的姓名、字母颜色）；
弹跳气泡（）；

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>

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

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

查看/编辑此部分（在drawName或“输出”功能中）：

for（var j=0；jvar red=[01100,63]；var orange=[40100,60]；var green=[75100,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”}els{bubbleShape=“circle”}drawName（myName，letterColors）；bounceBubbles（）；我在系统Phlume中获取了文件，对此我是新手，不确定要编辑什么来更改输出的位置。如何更改代码以使动画正确位于中心？这是一个很难回答的问题…它是相对的。“中心”取决于画布的大小和字符串中的字母数量。摆弄它…用90替换180…看看会发生什么。用50替换180；会发生什么？用250替换它…查看结果。重点是探索和发现，而不仅仅是“问”谢谢你的回答，Phlume:）我已经试过了
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;
}