js 生成点阵

最新推荐文章于 2022-06-12 23:38:04 发布

weixin_34150503

最新推荐文章于 2022-06-12 23:38:04 发布

阅读量966

点赞数

原文链接：https://juejin.im/post/5ad6e165f265da23826e8158

版权

先看效果

代码实现

<!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>
<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.beginPath();
          ctx.arc(oneTempLength * (j + .5), oneTempLength * (i + .5), oneTempLength * options.pointScale, 0, Math.PI * 2)
          ctx.fill()
        }
      }
    }
    return canvas;
  }
  TextPointSet.prototype.getCanvasWithText = function (text,options){
    return this.getCanvas(this.get(text,options))
  }
  var textTest = new TextPointSet();
  var textPoints = textTest.get('3');
  // document.body.appendChild(textTest.getCanvas(textPoints));
  // document.body.appendChild(textTest.getCanvas(textPoints));
  // document.body.appendChild(textTest.getCanvas(textPoints));
  // document.body.appendChild(textTest.getCanvasWithText('好'));
  // document.body.appendChild(textTest.getCanvasWithText('好'));
  // document.body.appendChild(textTest.getCanvasWithText('好'));
  // document.body.appendChild(textTest.getCanvasWithText('好'));
  // document.body.appendChild(textTest.getCanvasWithText('2'));
  // document.body.appendChild(textTest.getCanvasWithText('好'));
  textTest.getAll('你是最美,他同意是热帖关键人家特的太阳zheshisdfsdf发恼的个个都是公司规,定 ').map(item=>{
    document.body.appendChild(textTest.getCanvas(item,{
      size:70,pointScale:.3
    }));
  })


</script>
</body>
</html>

复制代码