使用JavaScript绘制二进制数据流图片的简单示例

<template>
  <canvas id="binaryCanvas" width="400" height="200"></canvas>
</template>

<script setup>
import { onMounted } from 'vue';

const drawFn = () => {
  // 获取Canvas元素和上下文
  var canvas = document.getElementById('binaryCanvas');
  var ctx = canvas.getContext('2d');
  // 二进制数据流
  var binaryStream = "1010110101011010";
  // 绘制二进制数据流图像
  drawBinaryStream(canvas, ctx, binaryStream);
};

// 绘制函数
const drawBinaryStream = (canvas, ctx, binaryStream) => {
  // 清除Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 设置绘制颜色
  ctx.strokeStyle = 'blue';
  // 设置绘制起点
  var x = 10;
  var y = canvas.height / 2;
  // 设置绘制步长
  var step = canvas.width / binaryStream.length;
  // 开始绘制
  ctx.beginPath();
  ctx.moveTo(x, y);
  // 根据二进制数据流绘制图形
  for (var i = 0; i < binaryStream.length; i++) {
    var bit = parseInt(binaryStream[i]);
    // 更新绘制位置
    x += step;
    // 绘制线段
    if (bit === 0) {
      ctx.lineTo(x, y - 20);
    } else {
      ctx.lineTo(x, y + 20);
    }
  }
  // 结束绘制
  ctx.stroke();
};

onMounted(() => {
  drawFn();
});
</script>

<style scoped>
  .box {
    width: 100%;
    height: 100%;
  }

  #binaryCanvas {
    border: 1px solid #000;
  }
</style>