Question

我需要通过WebPag创建QAM星座图。我会给出X，Y或复数。我试着寻找一些示例代码来帮助我制作这个情节，但没有成功。最接近的是散点图。有什么建议吗？

Answer 1

这是一些x，y坐标的示例图。网格从左上角的0,0开始，正x向右，正y向下。

＆＃13;

function draw() {
  var can = document.getElementById('can');
  var ctx = can.getContext('2d');
  var w = can.width;
  var h = can.height;
  ctx.fillStyle = "rgb(40,90,150)";
  ctx.fillRect(0, 0, w, h);

  var center_w = Math.floor(w / 2);
  var center_h = Math.floor(h / 2);

  ctx.beginPath();
  ctx.strokeStyle = "rgb(255,255,255)"

  // draw axis
  ctx.moveTo(0, center_h);
  ctx.lineTo(w, center_h);
  ctx.moveTo(center_w, 0);
  ctx.lineTo(center_w, h);

  //draw circle
  var radius = 20;
  var start_angle = 0;
  var end_angle = 360;
  var to_radians = Math.PI / 180;
  ctx.moveTo(center_w + radius, center_h);
  ctx.arc(center_w, center_h, radius, start_angle * to_radians, end_angle * to_radians);

  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle = "rgb(255,255,0)";

  // plot coords
  var coords = [
    [center_w, center_h],
    [10, 10],
    [10, 60],
    [10, 110],
    [10, 160],
    [60, 10],
    [110, 10],
    [160, 10]
  ];

  for (var i = 0; i < coords.length; i++) {
    var x = coords[i][0];
    var y = coords[i][1];
    ctx.beginPath();
    var radius = 2;
    ctx.moveTo(x + radius, y)
    ctx.arc(x, y, radius, 0 * to_radians, 360 * to_radians);
    ctx.fill();
    ctx.fillText("  " + x + ", " + y, x, y);
  }
}

draw();

＆＃13;

<canvas id="can" width="200" height="200"></canvas>

＆＃13;

使用Canvas / HTML5创建或显示N-QAM星座

1 个答案: