制作网页版提词器

最新推荐文章于 2023-03-27 14:28:03 发布

hzhfxian

最新推荐文章于 2023-03-27 14:28:03 发布

阅读量1.7k

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/hzhfxian/article/details/120283616

版权

提词器是通过一个高亮度的显示器件显示文稿内容，并将显示器件显示内容反射到摄像机镜头前一块呈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()
{//更新一行，对每一段以固定字数更新行,小字体显示１５行，大字体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>

hzhfxian

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作网页版提词器

提词器是通过一个高亮度的显示器件显示文稿内容，并将显示器件显示内容反射到摄像机镜头前一块呈45度角的专用镀膜玻璃上，把台词反射出来，使得演讲者在看演讲词的同时，也能面对摄像机。演讲者、提词器、摄像机三角架支撑在同一轴线上，从而产生了演讲者始终面向观众的亲切感，提高了演讲质量。软件部分有很多，实现文字移动，动手做一个吧。网页版主要使用Html和Javascript来实现。一、用JavascriptsetTimeout()方法实现动画setTimeout()方法将在以毫秒为单位指定的时间后调用函数，se
复制链接

扫一扫