提词器是通过一个高亮度的显示器件显示文稿内容,并将显示器件显示内容反射到摄像机镜头前一块呈45度角的专用镀膜玻璃上,把台词反射出来,使得演讲者在看演讲词的同时,也能面对摄像机。演讲者、提词器、摄像机三角架支撑在同一轴线上,从而产生了演讲者始终面向观众的亲切感,提高了演讲质量。
软件部分有很多,实现文字移动,动手做一个吧。
网页版主要使用Html和Javascript来实现。
一、用JavascriptsetTimeout()方法实现动画
setTimeout()方法将在以毫秒为单位指定的时间后调用函数,setTimeout方法需要2个参数:对回调函数的引用和以毫秒为单位的延迟。
要停止setTimeout并阻止执行该函数,需要使用clearTimeout()方法。
二、Html的canvas元素实现显示文本
HTML5的canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
三、主要部件
画布、文本输入、控制按钮。
源码如下:
<!DOCTYPE html>
<html>
<head>
<script>
var timeval=500
var row=0
var ttime
var ts
var fs=15
var rowh=50
var cans=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"];
var rl //每行字数
function down()
{
timeval=timeval+50
}
function up()
{
if(timeval>100) timeval=timeval-50
}
function begin()
{
row=0;
txt2arr();
timedCount();
}
function timedCount()
{
ttime=setTimeout("timedCount()",timeval)
canlist();
}
function move(s)
{
var j;
for(j=0;j<fs-1;j++)
{
cans[j]=cans[j+1];
}
cans[fs-1]=s;
}
function canlist()
{
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //2d用引用括起来
var ww=window.innerWidth;
context.clearRect(0,0,ww,800);
// 设置画笔的颜色和大小
context.fillStyle = "black"; // 填充颜色为黑色
context.strokeStyle = "blue"; // 画笔的颜色
context.lineWidth = 5; // 指定描边线的宽度
context.save();
context.beginPath();
// 写字
if(fs==15)
{
context.font = "48px orbitron";
for(j=0;j<fs;j++)
context.fillText( cans[j], 10,rowh+j*50);
}
else
{
context.font = "96px orbitron";
for(j=0;j<fs;j++)
context.fillText( cans[j], 10,rowh+j*100);
}
context.restore();
context.closePath();
if(rowh>5) rowh=rowh-5;
else{if (fs==15)rowh=50;else rowh=100;
updaterow();
}
}
function changeBorder()
{
fs=10;
rowh=100;
}
function txt2arr()
{//取文本框内容到数组
s=document.getElementById("mytx").value;//取文本框内容,检测回车
if (s.indexOf('\n')==-1)
{alert("没内容");return false;}
ts=s.split('\n');
}
function updaterow()
{//更新一行,对每一段以固定字数更新行,小字体显示15行,大字体10行
// row表示数组当前行,
if(row<ts.length)
{
var s;
ww=window.innerWidth;
rl=ww/rowh;
if(ts[row].length>rl)
{s=ts[row].substr(0,rl);ts[row]=ts[row].substr(rl);}
else
{s=ts[row];row=row+1;}
move(s);
}
else clearTimeout(ttime);
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="2200" height="800" style="border:1px solid #c3c3c3">抱歉,您的浏览器不支持canvas元素</canvas>
</div>
<p>
<input type="button" onclick="changeBorder()" value="大字体">
<input type="button" value="开始" onClick="begin()">
<input type="button" value="慢" onClick="down()">
<input type="button" value="快" onClick="up()">
</p>
<p>
<textarea rows="9" cols="60" name="mytx" id="mytx" style="overflow:hidden;font-size:20px"></textarea>
</p>
</body>
</html>