html页面中随机出现的文本
Posted
技术标签:
【中文标题】html页面中随机出现的文本【英文标题】：Randomly appearing text in html page 【发布时间】：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" >
</canvas>
</div>
</body>谢谢
【问题讨论】：
请出示相关代码，以便我们为您解决问题，谢谢。 到目前为止我只有这个 jsfiddle.net/argilmour/mh3937c5 但我不确定这是正确的，我不知道如何再添加 9 个单词以便它们随机出现 你什么都没告诉我们，一开始我们甚至都不知道它是在画布上 抱歉，Dendromaniac - 我需要尝试和研究更多 - 我真的不知道从哪里开始 - 我想我需要再看看 Css 动画 看看this 【参考方案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);
【讨论】：
以上是关于html页面中随机出现的文本的主要内容，如果未能解决你的问题，请参考以下文章
在 UIWebView 中使用 HTML 页面，相关页面图像出现奇怪问题，但链接有效