html页面中随机出现的文本答案

【问题标题】：Randomly appearing text in html pagehtml页面中随机出现的文本
【发布时间】：2015-08-26 03:01:45
【问题描述】：

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

我试图让 10 个不同字体大小的单词从不同方向滑入我文档中的画布上。我有一些代码 (jsFiddle)，但还没有走得太远，感谢所有建议。

var can, ctx, step, steps = 0,
  delay = 20;

function init() {
  can = document.getElementById("MyCanvas1");
  ctx = can.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.font = "20pt Verdana";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  step = 0;
  steps = can.height + 50;
  RunTextRightToLeft();
}

function RunTextRightToLeft() {
  step++;
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.save();
  ctx.translate(can.width / 2, step);
  ctx.fillText("Welcome", 0, 0);
  ctx.restore();
  if (step == steps)
    step = 0;
  if (step < steps)
    var t = setTimeout('RunTextRightToLeft()', delay);
}

canvas {
  border: 1px solid #bbb;
}
.subdiv {
  width: 320px;
}
.text {
  margin: auto;
  width: 290px;
}

<body onload="init();">
  <div class="subdiv">
    <canvas id="MyCanvas1" width="300" height="200">
    </canvas>
  </div>
</body>

谢谢

【问题讨论】：

请出示相关代码，以便我们为您解决问题，谢谢。
到目前为止我只有这个 jsfiddle.net/argilmour/mh3937c5 但我不确定这是正确的，我不知道如何再添加 9 个单词以便它们随机出现
你什么都没告诉我们，一开始我们甚至都不知道它是在画布上
抱歉，Dendromaniac - 我需要尝试和研究更多 - 我真的不知道从哪里开始 - 我想我需要再看看 Css 动画
看看this

标签： javascript html css canvas html5-canvas

【解决方案1】：

这是将单词动画化为最终句子的一种方法：

https://jsfiddle.net/m1erickson/q7tpsnmv/

在数组中定义一些单词对象：

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;
}

将每个单词从其起始位置 [x0,y0] 动画到其结束位置 [x1,y1]：

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);
    }
}

【讨论】：