Randomly appearing text in html page

Question

Randomly appearing text in html page

1.4k Views Asked by gillers322 At 03 April 2025 at 06:28

I have been putting a lot of effort into researching for a solution, but come up empty.

I am trying to make 10 words of different font-sizes slide in from different directions, on a canvas within my document. I have some code (jsFiddle), but haven't managed to get too far with it, all advice is appreciated.

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>

Thank You

Original Q&A

There are 1 best solutions below

**markE** · Accepted Answer

Here's one way to animate words into a final sentence:

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

Define some word objects in an array:

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

Calculate where each word must end up to make a sentence:

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

Animate each word from its starting postion [x0,y0] to its ending position [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);
    }
}

Randomly appearing text in html page

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in CANVAS

Related Questions in HTML5-CANVAS

Trending Questions

Popular # Hahtags

Popular Questions