网页模拟LED点阵屏显示文字

曹同学

已于 2022-11-02 15:05:28 修改

阅读量704

点赞数 1

文章标签： javascript 前端开发语言

于 2010-12-22 18:06:00 首次发布

本文链接：https://blog.csdn.net/opese/article/details/6092375

版权

有时候需要在网页中模拟LED点阵屏显示文字，效果如下图：

原理就是将文字像素存储在二维数组内，用canvas画出像素点，有效的点用字体颜色填充，无效的点用点阵屏底色填充（一般用深灰比较合适）。

完整代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body bgcolor="black">
<script>
  function TextPointSet() {
  }
  TextPointSet.prototype.points = {}
  TextPointSet.prototype.canvas = document.createElement('canvas');
  TextPointSet.prototype.ctx = TextPointSet.prototype.canvas.getContext('2d');
  TextPointSet.prototype.get = function (text) {
    return this.points[text] || this._createTextPoint(text);
  }
  TextPointSet.prototype.getAll = function (text) {
    var that = this;
    return text.split('').map(function (item) {
      return that.get(item);
    })
  }
  TextPointSet.prototype._createTextPoint = function (text) {
    var canvas = this.canvas, ctx = this.ctx, size = 16;
    this.clearCanvas();
    canvas.width = canvas.height = size;
    ctx.font = size + "px SimSun";
    ctx.fillText(text, 0, 14);
    var canvasData = ctx.getImageData(0, 0, size, size).data,
      textPointSet = [];
    for (var i = 0; i < size; i++) {
      textPointSet.push(temp = []);
      for (var j = 0; j < size; j++) {
        var index = i * size * 4 + j * 4;
        var r = canvasData[index],
          g = canvasData[index + 1],
          b = canvasData[index + 2],
          a = canvasData[index + 3];
        temp.push(a ? 1 : 0);
      }
    }
    return this.points[text] = textPointSet;
  }
  TextPointSet.prototype.clearCanvas = function () {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }
  TextPointSet.prototype.getCanvas = function (points, options) {
    if(!options){
      options = {
        size:100,
        pointScale:.2
      }
    }
    var canvas = document.createElement('canvas'),
     ctx = canvas.getContext('2d'),
    length = points.length,
      oneTempLength = options.size / length;
    canvas.height = canvas.width = options.size;
    for (var i = 0; i < length; i++) {
      for (var j = 0; j < length; j++) {
        if (points[i][j]) {
		  ctx.fillStyle = "yellow"; //字的颜色
        }
		else
		{
			ctx.fillStyle = "rgb(50,50,50)";  //点阵背景色
		}
          ctx.beginPath();
          ctx.arc(oneTempLength * (j + .5), oneTempLength * (i + .5), oneTempLength * options.pointScale, 0, Math.PI * 2);
		  ctx.closePath();
          ctx.fill();
      }
    }
    return canvas;
  }
  TextPointSet.prototype.getCanvasWithText = function (text,options){
    return this.getCanvas(this.get(text,options))
  }
  var textTest = new TextPointSet();

  textTest.getAll('模拟点阵屏的例子').map(item=>{
    document.body.appendChild(textTest.getCanvas(item,{
      size:100,pointScale:.3
    }));
  })
</script>
</body>
</html>

下图设置显示的文字，size:100是字体大小，pointScale:.3为像素点的饱满度，都可以自己试试。

  textTest.getAll('模拟点阵屏的例子').map(item=>{
    document.body.appendChild(textTest.getCanvas(item,{
      size:100,pointScale:.3
    }));
  })
</script>
</body>
</html>