Javascript html页面中随机出现的文本

我一直在努力寻找解决方案，但结果却一无所获

我试图让10个不同字体大小的单词从不同的方向滑入文档的画布。我有一些代码（），但还没有做到太远，所有的建议都很感谢

var can，ctx，步骤，步骤=0，
延迟=20；
函数init（）{
can=document.getElementById（“MyCanvas1”）；
ctx=can.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.font=“20pt Verdana”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
步长=0；
台阶=罐高+50；
RunTextRightToLeft（）；
}
函数RunTextRightToLeft（）{
step++；
ctx.clearRect（0，0，罐宽，罐高）；
ctx.save（）；
ctx.平移（can.width/2，步长）；
ctx.fillText（“欢迎”，0,0）；
ctx.restore（）；
如果（步骤==步骤）
步长=0；
如果（步骤<步骤）
var t=setTimeout（'RunTextRightToLeft（）'，delay）；
}

画布{
边框：1px实心#bbb；
}
.subdiv{
宽度：320px；
}
.文本{
保证金：自动；
宽度：290px；
}

---

以下是一种将单词动画化为最后一句的方法：

在数组中定义一些word对象：

var words=[];

words.push({
    text:'Welcome',
    // starting x,y of the word offscreen
    x0:Math.random()*cw,
    y0:(Math.random()*100)+ch,
    // ending position of the word onscreen
    x1:20,
    y1:50,
    // font-size
    size:10,
    // delay before starting to animate this word in
    delay:200,
    // the animations progress (percent-complete)
    pct:0
});

var accumX=0;
for(var i=0;i<words.length;i++){
    w=words[i];
    // measure this word and assign it's ending x1 appropriately
    ctx.font=w.size+'px verdana';
    var width=ctx.measureText(w.text).width;
    w.x1=accumX;
    accumX+=(width+8);
    // dx,dy are used to calculate the interim waypoints
    // for the word as it animates in
    w.dx=w.x1-w.x0;
    w.dy=w.y1-w.y0;
}

var start=performance.now();
requestAnimationFrame(animate);

function animate(time){
    var countComplete=0;
    // clear the canvas for this new frame
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<words.length;i++){
        var w=words[i];
        if(w.pct==100){countComplete++;}
        // calc the appropriate x,y waypoint
        var x=w.x0+w.dx*w.pct/100;
        var y=w.y0+w.dy*w.pct/100;
        w.pct=Math.min(100,w.pct+1);
        // draw the text
        ctx.font=w.size+'px verdana';
        ctx.fillText(w.text,x,y);
    }
    // request another loop if the animation is not complete
    if(countComplete<words.length){
        requestAnimationFrame(animate);
    }
}

计算每个单词必须在哪里结束才能组成一个句子：

var words=[];

words.push({
    text:'Welcome',
    // starting x,y of the word offscreen
    x0:Math.random()*cw,
    y0:(Math.random()*100)+ch,
    // ending position of the word onscreen
    x1:20,
    y1:50,
    // font-size
    size:10,
    // delay before starting to animate this word in
    delay:200,
    // the animations progress (percent-complete)
    pct:0
});

var accumX=0;
for(var i=0;i<words.length;i++){
    w=words[i];
    // measure this word and assign it's ending x1 appropriately
    ctx.font=w.size+'px verdana';
    var width=ctx.measureText(w.text).width;
    w.x1=accumX;
    accumX+=(width+8);
    // dx,dy are used to calculate the interim waypoints
    // for the word as it animates in
    w.dx=w.x1-w.x0;
    w.dy=w.y1-w.y0;
}

var start=performance.now();
requestAnimationFrame(animate);

function animate(time){
    var countComplete=0;
    // clear the canvas for this new frame
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<words.length;i++){
        var w=words[i];
        if(w.pct==100){countComplete++;}
        // calc the appropriate x,y waypoint
        var x=w.x0+w.dx*w.pct/100;
        var y=w.y0+w.dy*w.pct/100;
        w.pct=Math.min(100,w.pct+1);
        // draw the text
        ctx.font=w.size+'px verdana';
        ctx.fillText(w.text,x,y);
    }
    // request another loop if the animation is not complete
    if(countComplete<words.length){
        requestAnimationFrame(animate);
    }
}

var accumX=0；
对于（var i=0；我请显示相关代码，以便我们能够帮助您解决问题，谢谢。到目前为止，我所拥有的只是这个jsfiddle.net/argilmour/mh3937c5，但我不确定这是否正确，我不知道如何添加9个单词，使它们随机出现。您没有真正告诉我们任何事情，首先我们甚至不知道它在画布上romaniac-我需要更多的尝试和研究-我真的不知道从哪里开始-我猜我需要再看看Css动画看看